@remotion/promo-pages 4.0.461 → 4.0.463

package/dist/prompts/PromptsSubmit.js

@@ -1,26 +1,15 @@
-var __create = Object.create;
-var __getProtoOf = Object.getPrototypeOf;
 var __defProp = Object.defineProperty;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __toESM = (mod, isNodeMode, target) => {
-  target = mod != null ? __create(__getProtoOf(mod)) : {};
-  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
-  for (let key of __getOwnPropNames(mod))
-    if (!__hasOwnProp.call(to, key))
-      __defProp(to, key, {
-        get: () => mod[key],
-        enumerable: true
-      });
-  return to;
-};
+var __returnValue = (v) => v;
+function __exportSetter(name, newValue) {
+  this[name] = __returnValue.bind(null, newValue);
+}
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, {
       get: all[name],
       enumerable: true,
       configurable: true,
-      set: (newValue) => all[name] = () => newValue
+      set: __exportSetter.bind(all, name)
     });
 };
 var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
@@ -45,7 +34,7 @@ __export(exports_vidstack_CZgUA94N, {
   useSignal: () => useSignal,
   useReactScope: () => useReactScope,
   useReactContext: () => useReactContext,
-  useContext: () => useContext44,
+  useContext: () => useContext45,
   uppercaseFirstChar: () => uppercaseFirstChar,
   untrack: () => untrack,
   toggleClass: () => toggleClass,
@@ -619,7 +608,7 @@ function provideContext(context, value, scope = getScope()) {
   const hasProvidedValue = !isUndefined(value);
   setContext(context.id, hasProvidedValue ? value : context.provide?.(), scope);
 }
-function useContext44(context) {
+function useContext45(context) {
   const value = getContext(context.id);
   return value;
 }
@@ -679,7 +668,7 @@ class State {
   }
 }
 function useState41(state) {
-  return useContext44(state);
+  return useContext45(state);
 }
 function camelToKebabCase(str) {
   return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
@@ -717,7 +706,7 @@ function composeRefs3(...refs) {
   return (node) => refs.forEach((ref) => setRef3(ref, node));
 }
 function createClientComponent(Component2, options2) {
-  const forwardComponent = React53.forwardRef((props, forwardRef15) => {
+  const forwardComponent = React53.forwardRef((props, forwardRef16) => {
     let parentScopeRef = React53.useContext(ReactScopeContext), scopeRef = React53.useRef(null), stateRef = React53.useRef();
     if (!stateRef.current) {
       const state2 = createInternalState(), component = initComponent(Component2, state2, props, parentScopeRef.current);
@@ -740,7 +729,7 @@ function createClientComponent(Component2, options2) {
         attachToHost(state2, state2.el);
       }
       if (!state2.forwardRef) {
-        setRef3(forwardRef15, state2.component);
+        setRef3(forwardRef16, state2.component);
         state2.forwardRef = true;
       }
       return () => detachFromHost(state2);
@@ -1061,7 +1050,7 @@ function createServerComponent(Component2, options2) {
     let scope = React53.useContext(ReactScopeContext), component = createComponent(Component2, {
       props,
       scope: scope.current
-    }), host = new MaverickServerElement(component), attrs = {}, { style = {}, children, forwardRef: forwardRef15, ...renderProps } = props;
+    }), host = new MaverickServerElement(component), attrs = {}, { style = {}, children, forwardRef: forwardRef16, ...renderProps } = props;
     if (options2.props.size) {
       for (const prop2 of Object.keys(renderProps)) {
         if (!options2.props.has(prop2))
@@ -7061,7 +7050,7 @@ function boundTime(time, store) {
   return Math.min(Math.max(store.seekableStart() + 0.1, clippedTime), store.seekableEnd() - 0.1);
 }
 function useMediaContext() {
-  return useContext44(mediaContext);
+  return useContext45(mediaContext);
 }
 
 class MediaRemoteControl {
@@ -13976,7 +13965,7 @@ var init_vidstack_D5Pzx_k5 = __esm(() => {
         if (!this.connectScope)
           return;
         this.#attach();
-        const tooltip = useContext44(tooltipContext);
+        const tooltip = useContext45(tooltipContext);
         onDispose(() => {
           const button = this.#getButton();
           button && tooltip.detachTrigger(button);
@@ -13984,7 +13973,7 @@ var init_vidstack_D5Pzx_k5 = __esm(() => {
       }));
     }
     #attach() {
-      const button = this.#getButton(), tooltip = useContext44(tooltipContext);
+      const button = this.#getButton(), tooltip = useContext45(tooltipContext);
       button && tooltip.attachTrigger(button);
     }
     #getButton() {
@@ -14017,7 +14006,7 @@ var init_vidstack_D5Pzx_k5 = __esm(() => {
     }
     onConnect(el) {
       this.#attach(el);
-      const tooltip = useContext44(tooltipContext);
+      const tooltip = useContext45(tooltipContext);
       onDispose(() => tooltip.detachContent(el));
       onDispose(requestScopedAnimationFrame(() => {
         if (!this.connectScope)
@@ -14026,11 +14015,11 @@ var init_vidstack_D5Pzx_k5 = __esm(() => {
       }));
     }
     #attach(el) {
-      const tooltip = useContext44(tooltipContext);
+      const tooltip = useContext45(tooltipContext);
       tooltip.attachContent(el);
     }
     #watchPlacement() {
-      const { showing } = useContext44(tooltipContext);
+      const { showing } = useContext45(tooltipContext);
       if (!showing())
         return;
       const { placement, offset: mainOffset, alignOffset } = this.$props;
@@ -14041,7 +14030,7 @@ var init_vidstack_D5Pzx_k5 = __esm(() => {
       });
     }
     #getTrigger() {
-      return useContext44(tooltipContext).trigger();
+      return useContext45(tooltipContext).trigger();
     }
   };
   ToggleButtonController = class ToggleButtonController extends ViewController {
@@ -14537,7 +14526,7 @@ var init_vidstack_D5Pzx_k5 = __esm(() => {
     }
     onSetup() {
       if (hasProvidedContext(sliderObserverContext)) {
-        this.#observer = useContext44(sliderObserverContext);
+        this.#observer = useContext45(sliderObserverContext);
       }
     }
     onConnect(el) {
@@ -15153,7 +15142,7 @@ var init_vidstack_D5Pzx_k5 = __esm(() => {
     #slider;
     onSetup() {
       this.#slider = useState41(Slider.state);
-      this.#format = useContext44(sliderValueFormatContext);
+      this.#format = useContext45(sliderValueFormatContext);
       this.#text = computed(this.getValueText.bind(this));
     }
     getValueText() {
@@ -15192,7 +15181,7 @@ var init_vidstack_D5Pzx_k5 = __esm(() => {
     };
     #slider;
     onSetup() {
-      this.#slider = useContext44(sliderContext);
+      this.#slider = useContext45(sliderContext);
       const { active } = useState41(Slider.state);
       this.setAttributes({
         "data-visible": active
@@ -15620,7 +15609,7 @@ var init_vidstack_D5Pzx_k5 = __esm(() => {
       }
     }
     #watchPreviewing() {
-      const player = this.#media.player.el, { preview } = useContext44(sliderContext);
+      const player = this.#media.player.el, { preview } = useContext45(sliderContext);
       player && preview() && setAttribute(player, "data-preview", this.$state.active());
     }
     #seeking(time, event2) {
@@ -16058,7 +16047,7 @@ var init_vidstack_D5Pzx_k5 = __esm(() => {
         closeMenu: this.close.bind(this)
       });
       if (hasProvidedContext(menuContext)) {
-        this.#parentMenu = useContext44(menuContext);
+        this.#parentMenu = useContext45(menuContext);
       }
       this.#observeSliders();
       this.setAttributes({
@@ -16103,7 +16092,7 @@ var init_vidstack_D5Pzx_k5 = __esm(() => {
       this.#transitionCallbacks.clear();
     }
     #observeSliders() {
-      let sliderActiveTimer = -1, parentSliderObserver = hasProvidedContext(sliderObserverContext) ? useContext44(sliderObserverContext) : null;
+      let sliderActiveTimer = -1, parentSliderObserver = hasProvidedContext(sliderObserverContext) ? useContext45(sliderObserverContext) : null;
       provideContext(sliderObserverContext, {
         onDragStart: () => {
           parentSliderObserver?.onDragStart?.();
@@ -16430,7 +16419,7 @@ var init_vidstack_D5Pzx_k5 = __esm(() => {
       new FocusVisibleController;
     }
     onSetup() {
-      this.#menu = useContext44(menuContext);
+      this.#menu = useContext45(menuContext);
     }
     onAttach(el) {
       this.#menu.attachMenuButton(this);
@@ -16546,10 +16535,10 @@ var init_vidstack_D5Pzx_k5 = __esm(() => {
       });
     }
     onAttach(el) {
-      this.#menu = useContext44(menuContext);
+      this.#menu = useContext45(menuContext);
       this.#menu.attachMenuItems(this);
       if (hasProvidedContext(menuPortalContext)) {
-        const portal = useContext44(menuPortalContext);
+        const portal = useContext45(menuPortalContext);
         if (portal) {
           provideContext(menuPortalContext, null);
           portal.attach(el);
@@ -16724,12 +16713,12 @@ var init_vidstack_D5Pzx_k5 = __esm(() => {
     }
     #onDisconnect() {
       scoped(() => {
-        const group = useContext44(radioControllerContext);
+        const group = useContext45(radioControllerContext);
         group.remove(this.#controller);
       }, this.connectScope);
     }
     #addToGroup() {
-      const group = useContext44(radioControllerContext);
+      const group = useContext45(radioControllerContext);
       group.add(this.#controller);
     }
     #watchValue() {
@@ -23077,8 +23066,21 @@ import * as React6 from "react";
 import React7, { useMemo as useMemo6, useRef as useRef2 } from "react";
 import { useContext as useContext8, useMemo as useMemo7 } from "react";
 import { jsx as jsx72 } from "react/jsx-runtime";
-import { useEffect as useEffect4, useMemo as useMemo11, useState as useState3 } from "react";
-import { useContext as useContext11 } from "react";
+import {
+  forwardRef as forwardRef4,
+  useCallback as useCallback6,
+  useEffect as useEffect5,
+  useMemo as useMemo16,
+  useState as useState6
+} from "react";
+import {
+  forwardRef as forwardRef3,
+  useContext as useContext17,
+  useEffect as useEffect3,
+  useMemo as useMemo14,
+  useState as useState5
+} from "react";
+import { useContext as useContext14, useMemo as useMemo11 } from "react";
 import { createContext as createContext12 } from "react";
 import { useContext as useContext10, useMemo as useMemo9 } from "react";
 import {
@@ -23089,52 +23091,45 @@ import {
   useState as useState2
 } from "react";
 import { jsx as jsx82 } from "react/jsx-runtime";
-import { useEffect as useEffect3, useMemo as useMemo10, useRef as useRef4 } from "react";
-import { useRef as useRef5 } from "react";
-import { jsx as jsx92 } from "react/jsx-runtime";
-import {
-  forwardRef as forwardRef3,
-  useContext as useContext16,
-  useEffect as useEffect5,
-  useMemo as useMemo16,
-  useState as useState6
-} from "react";
-import { useContext as useContext14, useMemo as useMemo13 } from "react";
+import { useContext as useContext11 } from "react";
 import { useContext as useContext13 } from "react";
-import { useContext as useContext12, useMemo as useMemo12 } from "react";
-import { jsx as jsx102 } from "react/jsx-runtime";
+import { useContext as useContext12, useMemo as useMemo10 } from "react";
+import { jsx as jsx92 } from "react/jsx-runtime";
 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 React11, { useCallback as useCallback5, useMemo as useMemo12, useRef as useRef4, useState as useState3 } from "react";
+import { jsx as jsx102 } from "react/jsx-runtime";
+import React12, { forwardRef as forwardRef2, useState as useState4, useContext as useContext16, useMemo as useMemo13 } from "react";
+import { useContext as useContext15, useRef as useRef5 } from "react";
 import { createContext as createContext15 } from "react";
+import { jsx as jsx112 } from "react/jsx-runtime";
+import { useEffect as useEffect4, useMemo as useMemo15, useRef as useRef6 } from "react";
 import { jsx as jsx12 } from "react/jsx-runtime";
 import {
-  forwardRef as forwardRef4,
+  forwardRef as forwardRef5,
   useEffect as useEffect6,
   useImperativeHandle as useImperativeHandle2,
   useLayoutEffect as useLayoutEffect2,
   useRef as useRef8,
   useState as useState7
 } from "react";
-import React15, { useCallback as useCallback6, useImperativeHandle, useRef as useRef7 } from "react";
+import React15, { useCallback as useCallback7, useImperativeHandle, useRef as useRef7 } from "react";
 import { jsx as jsx13 } from "react/jsx-runtime";
 import { jsx as jsx14 } from "react/jsx-runtime";
 import {
   createContext as createContext16,
-  forwardRef as forwardRef5,
-  useCallback as useCallback7,
-  useContext as useContext17,
+  forwardRef as forwardRef6,
+  useCallback as useCallback8,
+  useContext as useContext18,
   useLayoutEffect as useLayoutEffect3,
   useMemo as useMemo17,
   useRef as useRef9,
   useState as useState8
 } from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
-import { useContext as useContext18, useLayoutEffect as useLayoutEffect5, useState as useState10 } from "react";
+import { useContext as useContext19, useLayoutEffect as useLayoutEffect5, useState as useState10 } from "react";
 import {
   createContext as createContext17,
-  useCallback as useCallback8,
+  useCallback as useCallback9,
   useImperativeHandle as useImperativeHandle3,
   useLayoutEffect as useLayoutEffect4,
   useMemo as useMemo18,
@@ -23142,29 +23137,29 @@ import {
   useState as useState9
 } from "react";
 import { jsx as jsx16 } from "react/jsx-runtime";
-import { forwardRef as forwardRef8, useCallback as useCallback13, useContext as useContext30 } from "react";
+import { forwardRef as forwardRef9, useCallback as useCallback14, useContext as useContext31 } 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 { useContext as useContext20 } 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 createContext20, useMemo as useMemo20, useReducer } from "react";
 import { jsx as jsx19 } from "react/jsx-runtime";
 import React23, {
-  forwardRef as forwardRef6,
-  useContext as useContext28,
+  forwardRef as forwardRef7,
+  useContext as useContext29,
   useEffect as useEffect14,
   useImperativeHandle as useImperativeHandle4,
   useMemo as useMemo28,
   useRef as useRef18,
   useState as useState16
 } from "react";
-import { useContext as useContext21, useLayoutEffect as useLayoutEffect6, useRef as useRef13 } from "react";
+import { useContext as useContext22, useLayoutEffect as useLayoutEffect6, useRef as useRef13 } from "react";
 import React20, {
   createContext as createContext21,
   createRef as createRef2,
-  useCallback as useCallback9,
-  useContext as useContext20,
+  useCallback as useCallback10,
+  useContext as useContext21,
   useMemo as useMemo22,
   useRef as useRef11,
   useState as useState12
@@ -23172,20 +23167,20 @@ import React20, {
 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 useEffect8, useMemo as useMemo23, useState as useState13 } from "react";
-import { useContext as useContext22 } from "react";
+import { useContext as useContext24, useEffect as useEffect8, useMemo as useMemo23, useState as useState13 } from "react";
+import { useContext as useContext23 } from "react";
 import {
-  useCallback as useCallback12,
-  useContext as useContext26,
+  useCallback as useCallback13,
+  useContext as useContext27,
   useEffect as useEffect12,
   useLayoutEffect as useLayoutEffect8,
   useRef as useRef17
 } from "react";
-import { useCallback as useCallback11, useMemo as useMemo26, useRef as useRef15 } from "react";
-import { useContext as useContext25, useMemo as useMemo25 } from "react";
+import { useCallback as useCallback12, useMemo as useMemo26, useRef as useRef15 } from "react";
+import { useContext as useContext26, useMemo as useMemo25 } from "react";
 import React21, {
-  useCallback as useCallback10,
-  useContext as useContext24,
+  useCallback as useCallback11,
+  useContext as useContext25,
   useEffect as useEffect9,
   useLayoutEffect as useLayoutEffect7,
   useMemo as useMemo24,
@@ -23197,11 +23192,11 @@ import React22 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 { createContext as createContext22, useContext as useContext28, useMemo as useMemo27 } from "react";
 import { jsx as jsx222 } from "react/jsx-runtime";
 import {
-  forwardRef as forwardRef7,
-  useContext as useContext29,
+  forwardRef as forwardRef8,
+  useContext as useContext30,
   useEffect as useEffect15,
   useImperativeHandle as useImperativeHandle5,
   useLayoutEffect as useLayoutEffect9,
@@ -23210,11 +23205,11 @@ import {
 } from "react";
 import { jsx as jsx23 } from "react/jsx-runtime";
 import { jsx as jsx24 } from "react/jsx-runtime";
-import { forwardRef as forwardRef9, useCallback as useCallback14, useState as useState17 } from "react";
+import { forwardRef as forwardRef10, useCallback as useCallback15, useState as useState17 } from "react";
 import { jsx as jsx25 } from "react/jsx-runtime";
 import {
-  useCallback as useCallback15,
-  useContext as useContext31,
+  useCallback as useCallback16,
+  useContext as useContext32,
   useImperativeHandle as useImperativeHandle6,
   useLayoutEffect as useLayoutEffect10,
   useRef as useRef20,
@@ -23224,7 +23219,7 @@ import { jsx as jsx26 } from "react/jsx-runtime";
 import { createRef as createRef3 } from "react";
 import React28 from "react";
 import {
-  useCallback as useCallback16,
+  useCallback as useCallback17,
   useImperativeHandle as useImperativeHandle7,
   useMemo as useMemo30,
   useRef as useRef21,
@@ -23233,15 +23228,15 @@ import {
 import { jsx as jsx27 } from "react/jsx-runtime";
 import React29 from "react";
 import { useMemo as useMemo322 } from "react";
-import { createContext as createContext23, useContext as useContext32, useMemo as useMemo31 } from "react";
+import { createContext as createContext23, useContext as useContext33, 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 createContext24 } from "react";
-import { useCallback as useCallback18 } from "react";
+import { useCallback as useCallback19 } from "react";
 import {
-  useCallback as useCallback17,
-  useContext as useContext33,
+  useCallback as useCallback18,
+  useContext as useContext34,
   useEffect as useEffect16,
   useLayoutEffect as useLayoutEffect11,
   useMemo as useMemo33,
@@ -23249,8 +23244,8 @@ import {
 } from "react";
 import { jsx as jsx30 } from "react/jsx-runtime";
 import React34, {
-  forwardRef as forwardRef10,
-  useContext as useContext34,
+  forwardRef as forwardRef11,
+  useContext as useContext35,
   useEffect as useEffect18,
   useImperativeHandle as useImperativeHandle8,
   useMemo as useMemo34,
@@ -23262,16 +23257,16 @@ 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 { Children, forwardRef as forwardRef12, useMemo as useMemo36 } from "react";
 import React37 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 useContext36 } from "react";
+import { forwardRef as forwardRef14, useCallback as useCallback20, useContext as useContext37 } from "react";
 import {
-  forwardRef as forwardRef12,
-  useContext as useContext35,
+  forwardRef as forwardRef13,
+  useContext as useContext36,
   useEffect as useEffect19,
   useImperativeHandle as useImperativeHandle9,
   useLayoutEffect as useLayoutEffect12,
@@ -23281,13 +23276,17 @@ import {
 import { jsx as jsx36 } from "react/jsx-runtime";
 import { jsx as jsx37 } from "react/jsx-runtime";
 var __defProp2 = Object.defineProperty;
+var __returnValue2 = (v) => v;
+function __exportSetter2(name, newValue) {
+  this[name] = __returnValue2.bind(null, newValue);
+}
 var __export2 = (target, all) => {
   for (var name in all)
     __defProp2(target, name, {
       get: all[name],
       enumerable: true,
       configurable: true,
-      set: (newValue) => all[name] = () => newValue
+      set: __exportSetter2.bind(all, name)
     });
 };
 if (typeof createContext !== "function") {
@@ -24347,6 +24346,81 @@ var Composition = (props) => {
     ...props
   });
 };
+var componentsToAddStacksTo = [];
+var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
+var addSequenceStackTraces = (component) => {
+  componentsToAddStacksTo.push(component);
+};
+var sequenceStyleSchema = {
+  "style.translate": {
+    type: "translate",
+    step: 1,
+    default: "0px 0px",
+    description: "Offset"
+  },
+  "style.scale": {
+    type: "number",
+    min: 0.05,
+    max: 100,
+    step: 0.01,
+    default: 1,
+    description: "Scale"
+  },
+  "style.rotate": {
+    type: "rotation",
+    step: 1,
+    default: "0deg",
+    description: "Rotation"
+  },
+  "style.opacity": {
+    type: "number",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    default: 1,
+    description: "Opacity"
+  },
+  premountFor: {
+    type: "number",
+    default: 0,
+    description: "Premount For",
+    min: 0,
+    step: 1
+  },
+  postmountFor: {
+    type: "hidden"
+  },
+  styleWhilePremounted: {
+    type: "hidden"
+  },
+  styleWhilePostmounted: {
+    type: "hidden"
+  }
+};
+var hiddenField = {
+  type: "boolean",
+  default: false,
+  description: "Hidden"
+};
+var sequenceSchema = {
+  hidden: hiddenField,
+  layout: {
+    type: "enum",
+    default: "absolute-fill",
+    description: "Layout",
+    variants: {
+      "absolute-fill": sequenceStyleSchema,
+      none: {}
+    }
+  }
+};
+var sequenceSchemaDefaultLayoutNone = {
+  ...sequenceSchema,
+  layout: {
+    ...sequenceSchema.layout,
+    default: "none"
+  }
+};
 var SequenceContext = createContext12(null);
 var exports_timeline_position_state = {};
 __export2(exports_timeline_position_state, {
@@ -24552,314 +24626,13 @@ var useCurrentFrame = () => {
   const contextOffset = context ? context.cumulatedFrom + context.relativeFrom : 0;
   return frame - contextOffset;
 };
-var flattenEffects = (effects) => {
-  const out = [];
-  for (const item of effects) {
-    if (Array.isArray(item)) {
-      for (const inner of item) {
-        out.push(inner);
-      }
-    } else {
-      out.push(item);
-    }
-  }
-  return out;
-};
-var groupByBackend = (effects) => {
-  const runs = [];
-  let current = [];
-  let currentBackend = null;
-  for (const eff of effects) {
-    const { backend } = eff.definition;
-    if (currentBackend === null || backend === currentBackend) {
-      current.push(eff);
-      currentBackend = backend;
-    } else {
-      runs.push({ backend: currentBackend, effects: current });
-      current = [eff];
-      currentBackend = backend;
-    }
-  }
-  if (currentBackend !== null && current.length > 0) {
-    runs.push({ backend: currentBackend, effects: current });
-  }
-  return runs;
-};
-
-class CanvasPool {
-  width;
-  height;
-  pairs = new Map;
-  lostContexts = new Set;
-  constructor(width, height) {
-    this.width = width;
-    this.height = height;
-  }
-  getPair(backend) {
-    const existing = this.pairs.get(backend);
-    if (existing) {
-      return existing;
-    }
-    const pair = [
-      this.allocateCanvas(backend),
-      this.allocateCanvas(backend)
-    ];
-    this.pairs.set(backend, pair);
-    return pair;
-  }
-  assertContextNotLost(canvas) {
-    if (this.lostContexts.has(canvas)) {
-      throw new Error("WebGL context was lost during canvas effect rendering. " + "This typically happens in headless or memory-constrained environments (e.g. Remotion Lambda). " + "Try reducing concurrency or increasing the Lambda function memory.");
-    }
-  }
-  allocateCanvas(backend) {
-    const canvas = document.createElement("canvas");
-    canvas.width = this.width;
-    canvas.height = this.height;
-    switch (backend) {
-      case "2d": {
-        const ctx = canvas.getContext("2d", {
-          colorSpace: "srgb"
-        });
-        if (!ctx) {
-          throw new Error("Failed to acquire 2D context for canvas effect");
-        }
-        return canvas;
-      }
-      case "webgl2": {
-        const ctx = canvas.getContext("webgl2", {
-          premultipliedAlpha: true,
-          alpha: true,
-          preserveDrawingBuffer: true
-        });
-        if (!ctx) {
-          throw new Error("Failed to acquire WebGL2 context for canvas effect");
-        }
-        canvas.addEventListener("webglcontextlost", (e) => {
-          e.preventDefault();
-          this.lostContexts.add(canvas);
-        });
-        canvas.addEventListener("webglcontextrestored", () => {
-          this.lostContexts.delete(canvas);
-        });
-        ctx.pixelStorei(ctx.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
-        return canvas;
-      }
-      case "webgpu": {
-        if (typeof navigator === "undefined" || !("gpu" in navigator)) {
-          throw new Error("WebGPU is not available in this environment for canvas effect");
-        }
-        return canvas;
-      }
-      default: {
-        const exhaustive = backend;
-        throw new Error(`Unknown effect backend: ${exhaustive}`);
-      }
-    }
-  }
-}
-var devicePromise = null;
-var getGpuDevice = () => {
-  if (devicePromise) {
-    return devicePromise;
-  }
-  devicePromise = (async () => {
-    if (typeof navigator === "undefined" || !("gpu" in navigator)) {
-      throw new Error("WebGPU is not available in this environment");
-    }
-    const { gpu } = navigator;
-    const adapter = await gpu.requestAdapter();
-    if (!adapter) {
-      throw new Error("No WebGPU adapter available");
-    }
-    return adapter.requestDevice();
-  })();
-  return devicePromise;
-};
-var createEffectChainState = (width, height) => ({
-  pool: new CanvasPool(width, height),
-  setupCache: new WeakMap,
-  cleanupRegistry: [],
-  currentRunId: 0
-});
-var cleanupEffectChainState = (state) => {
-  state.currentRunId++;
-  for (const entry of state.cleanupRegistry) {
-    entry.definition.cleanup(entry.state);
-  }
-};
-var ensureSetup = (state, def, target) => {
-  const widened = def;
-  if (state.setupCache.has(widened)) {
-    return state.setupCache.get(widened);
-  }
-  const setupState = def.setup(target);
-  state.setupCache.set(widened, setupState);
-  state.cleanupRegistry.push({ definition: widened, state: setupState });
-  return setupState;
-};
-var runEffectChain = async ({
-  state,
-  source,
-  effects,
-  output,
-  frame,
-  width,
-  height
-}) => {
-  const runId = ++state.currentRunId;
-  const isCancelled = () => state.currentRunId !== runId;
-  const runs = groupByBackend(effects);
-  let currentImage = source;
-  let lastTarget = null;
-  if (runs.length === 0) {
-    if (source === output) {
-      return true;
-    }
-    const ctx = output.getContext("2d");
-    if (!ctx) {
-      throw new Error("Failed to acquire 2D context for output canvas");
-    }
-    ctx.clearRect(0, 0, width, height);
-    ctx.drawImage(currentImage, 0, 0, width, height);
-    return true;
-  }
-  let needsGpuDevice = false;
-  for (const run of runs) {
-    if (run.backend === "webgpu") {
-      needsGpuDevice = true;
-      break;
-    }
-  }
-  const gpuDevice = needsGpuDevice ? await getGpuDevice() : null;
-  if (isCancelled()) {
-    return false;
-  }
-  for (let runIndex = 0;runIndex < runs.length; runIndex++) {
-    const run = runs[runIndex];
-    const [a, b] = state.pool.getPair(run.backend);
-    let dst = a;
-    for (const eff of run.effects) {
-      const def = eff.definition;
-      const setupState = ensureSetup(state, def, dst);
-      def.apply({
-        source: currentImage,
-        target: dst,
-        state: setupState,
-        params: eff.params,
-        frame,
-        width,
-        height,
-        gpuDevice
-      });
-      if (run.backend === "webgl2") {
-        state.pool.assertContextNotLost(dst);
-      }
-      currentImage = dst;
-      dst = dst === a ? b : a;
-    }
-    lastTarget = currentImage ?? lastTarget;
-    const nextRun = runs[runIndex + 1];
-    if (nextRun && nextRun.backend !== run.backend && lastTarget) {
-      const bitmap = await createImageBitmap(lastTarget);
-      if (isCancelled()) {
-        bitmap.close();
-        return false;
-      }
-      currentImage = bitmap;
-    }
-  }
-  if (!lastTarget) {
-    return true;
-  }
-  const outCtx = output.getContext("2d");
-  if (!outCtx) {
-    throw new Error("Failed to acquire 2D context for output canvas");
-  }
-  outCtx.clearRect(0, 0, width, height);
-  outCtx.drawImage(lastTarget, 0, 0, width, height);
-  return true;
-};
-var useEffectChainState = () => {
-  const chainStateRef = useRef4(null);
-  const sizeRef = useRef4(null);
-  useEffect3(() => {
-    return () => {
-      if (chainStateRef.current) {
-        cleanupEffectChainState(chainStateRef.current);
-      }
-    };
-  }, []);
-  return useMemo10(() => ({
-    get: (width, height) => {
-      if (!sizeRef.current || sizeRef.current.width !== width || sizeRef.current.height !== height) {
-        if (chainStateRef.current) {
-          cleanupEffectChainState(chainStateRef.current);
-        }
-        chainStateRef.current = createEffectChainState(width, height);
-        sizeRef.current = { width, height };
-      }
-      return chainStateRef.current;
-    }
-  }), []);
-};
-var useMemoizedEffects = (effects) => {
-  const previousRef = useRef5(null);
-  const previous = previousRef.current;
-  const isSame = previous !== null && previous.length === effects.length && previous.every((p, i) => p.definition === effects[i].definition && p.effectKey === effects[i].effectKey);
-  if (isSame) {
-    return previous;
-  }
-  const next = effects.map((e) => ({
-    definition: e.definition,
-    stack: e.stack,
-    effectKey: e.effectKey,
-    params: e.params,
-    memoized: true
-  }));
-  previousRef.current = next;
-  return next;
-};
-var componentsToAddStacksTo = [];
-var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
-var addSequenceStackTraces = (component) => {
-  componentsToAddStacksTo.push(component);
-};
-var VERSION = "4.0.461";
-var checkMultipleRemotionVersions = () => {
-  if (typeof globalThis === "undefined") {
-    return;
-  }
-  const set = () => {
-    globalThis.remotion_imported = VERSION;
-    if (typeof window !== "undefined") {
-      window.remotion_imported = VERSION;
-    }
-  };
-  const alreadyImported = globalThis.remotion_imported || typeof window !== "undefined" && window.remotion_imported;
-  if (alreadyImported) {
-    if (alreadyImported === VERSION) {
-      return;
-    }
-    if (typeof alreadyImported === "string" && alreadyImported.includes("webcodecs")) {
-      set();
-      return;
-    }
-    throw new TypeError(`\uD83D\uDEA8 Multiple versions of Remotion detected: ${[
-      VERSION,
-      typeof alreadyImported === "string" ? alreadyImported : "an older version"
-    ].filter(truthy2).join(" and ")}. This will cause things to break in an unexpected way.
-Check that all your Remotion packages are on the same version. If your dependencies depend on Remotion, make them peer dependencies. You can also run \`npx remotion versions\` from your terminal to see which versions are mismatching.`);
-  }
-  set();
-};
 var useUnsafeVideoConfig = () => {
   const context = useContext12(SequenceContext);
   const ctxWidth = context?.width ?? null;
   const ctxHeight = context?.height ?? null;
   const ctxDuration = context?.durationInFrames ?? null;
   const video = useVideo();
-  return useMemo12(() => {
+  return useMemo10(() => {
     if (!video) {
       return null;
     }
@@ -24933,7 +24706,7 @@ var Freeze = ({
   if (!Number.isFinite(frameToFreeze)) {
     throw new Error(`The 'frame' prop of <Freeze /> must be a finite number, but it is ${frameToFreeze}.`);
   }
-  const isActive = useMemo13(() => {
+  const isActive = useMemo11(() => {
     if (typeof active === "boolean") {
       return active;
     }
@@ -24944,7 +24717,7 @@ var Freeze = ({
   const timelineContext = useTimelineContext();
   const sequenceContext = useContext14(SequenceContext);
   const relativeFrom = sequenceContext?.relativeFrom ?? 0;
-  const timelineValue = useMemo13(() => {
+  const timelineValue = useMemo11(() => {
     if (!isActive) {
       return timelineContext;
     }
@@ -24959,7 +24732,7 @@ var Freeze = ({
       }
     };
   }, [isActive, timelineContext, videoConfig.id, frameToFreeze, relativeFrom]);
-  const newSequenceContext = useMemo13(() => {
+  const newSequenceContext = useMemo11(() => {
     if (!sequenceContext) {
       return null;
     }
@@ -24971,9 +24744,9 @@ var Freeze = ({
       cumulatedFrom: 0
     };
   }, [sequenceContext, isActive]);
-  return /* @__PURE__ */ jsx102(TimelineContext.Provider, {
+  return /* @__PURE__ */ jsx92(TimelineContext.Provider, {
     value: timelineValue,
-    children: /* @__PURE__ */ jsx102(SequenceContext.Provider, {
+    children: /* @__PURE__ */ jsx92(SequenceContext.Provider, {
       value: newSequenceContext,
       children
     })
@@ -24982,74 +24755,7 @@ var Freeze = ({
 var PremountContext = createContext14({
   premountFramesRemaining: 0
 });
-var sequenceStyleSchema = {
-  "style.translate": {
-    type: "translate",
-    step: 1,
-    default: "0px 0px",
-    description: "Offset"
-  },
-  "style.scale": {
-    type: "number",
-    min: 0.05,
-    max: 100,
-    step: 0.01,
-    default: 1,
-    description: "Scale"
-  },
-  "style.rotate": {
-    type: "rotation",
-    step: 1,
-    default: "0deg",
-    description: "Rotation"
-  },
-  "style.opacity": {
-    type: "number",
-    min: 0,
-    max: 1,
-    step: 0.01,
-    default: 1,
-    description: "Opacity"
-  },
-  premountFor: {
-    type: "number",
-    default: 0,
-    description: "Premount For",
-    min: 0,
-    step: 1
-  },
-  postmountFor: {
-    type: "hidden"
-  },
-  styleWhilePremounted: {
-    type: "hidden"
-  },
-  styleWhilePostmounted: {
-    type: "hidden"
-  }
-};
-var sequenceSchema = {
-  layout: {
-    type: "enum",
-    default: "absolute-fill",
-    description: "Layout",
-    variants: {
-      "absolute-fill": sequenceStyleSchema,
-      none: {}
-    }
-  }
-};
-var sequenceSchemaDefaultLayoutNone = {
-  ...sequenceSchema,
-  layout: {
-    ...sequenceSchema.layout,
-    default: "none"
-  }
-};
-var nodePathToString = (nodePath) => {
-  return nodePath.join(".");
-};
-var SequenceManager = React12.createContext({
+var SequenceManager = React11.createContext({
   registerSequence: () => {
     throw new Error("SequenceManagerContext not initialized");
   },
@@ -25058,62 +24764,57 @@ var SequenceManager = React12.createContext({
   },
   sequences: []
 });
-var SequenceVisibilityToggleContext = React12.createContext({
-  hidden: {},
-  setHidden: () => {
-    throw new Error("SequenceVisibilityToggle not initialized");
-  }
-});
-var getCodeValuesCtx = (codeValues, nodePath) => {
-  const status = codeValues[nodePathToString(nodePath)];
-  if (!status) {
-    return;
-  }
-  if (!status.canUpdate) {
-    return;
-  }
-  return status.props;
+var makeSequencePropsSubscriptionKey = (key) => {
+  return `${key.nodePath.join(".")}.${key.sequenceKeys.join(".")}.${key.effectKeys.map((keys) => keys.join(".")).join(".")}`;
 };
-var VisualModeCodeValuesContext = React12.createContext({
-  getCodeValues: () => {
-    throw new Error("VisualModeCodeValuesContext not initialized");
-  }
+var VisualModeCodeValuesContext = React11.createContext({
+  codeValues: {}
 });
-var VisualModeDragOverridesContext = React12.createContext({
+var VisualModeDragOverridesContext = React11.createContext({
   getDragOverrides: () => {
     throw new Error("VisualModeDragOverridesContext not initialized");
+  },
+  getEffectDragOverrides: () => {
+    throw new Error("VisualModeDragOverridesContext not initialized");
   }
 });
-var VisualModeSettersContext = React12.createContext({
+var VisualModeSettersContext = React11.createContext({
   setDragOverrides: () => {
     throw new Error("VisualModeSettersContext not initialized");
   },
   clearDragOverrides: () => {
     throw new Error("VisualModeSettersContext not initialized");
   },
+  setEffectDragOverrides: () => {
+    throw new Error("VisualModeSettersContext not initialized");
+  },
+  clearEffectDragOverrides: () => {
+    throw new Error("VisualModeSettersContext not initialized");
+  },
   setCodeValues: () => {
     throw new Error("VisualModeSettersContext not initialized");
   }
 });
+var effectDragOverridesKey = (nodePath, effectIndex) => `${makeSequencePropsSubscriptionKey(nodePath)}.effects.${effectIndex}`;
 var SequenceManagerProvider = ({ children }) => {
-  const [sequences, setSequences] = useState4([]);
-  const [hidden, setHidden] = useState4({});
-  const [dragOverrides, setControlOverrides] = useState4({});
-  const controlOverridesRef = useRef6(dragOverrides);
+  const [sequences, setSequences] = useState3([]);
+  const [dragOverrides, setControlOverrides] = useState3({});
+  const controlOverridesRef = useRef4(dragOverrides);
   controlOverridesRef.current = dragOverrides;
-  const [codeValues, setCodeValuesMapState] = useState4({});
+  const [effectDragOverridesState, setEffectDragOverridesState] = useState3({});
+  const [codeValues, setCodeValuesMapState] = useState3({});
   const setDragOverrides = useCallback5((nodePath, key, value) => {
     setControlOverrides((prev) => ({
       ...prev,
-      [nodePathToString(nodePath)]: {
-        ...prev[nodePathToString(nodePath)],
+      [makeSequencePropsSubscriptionKey(nodePath)]: {
+        ...prev[makeSequencePropsSubscriptionKey(nodePath)],
         [key]: value
       }
     }));
   }, []);
   const clearDragOverrides = useCallback5((nodePath) => {
     setControlOverrides((prev) => {
-      const key = nodePathToString(nodePath);
+      const key = makeSequencePropsSubscriptionKey(nodePath);
       if (!prev[key]) {
         return prev;
       }
@@ -25122,9 +24823,32 @@ var SequenceManagerProvider = ({ children }) => {
       return next;
     });
   }, []);
+  const setEffectDragOverrides = useCallback5((nodePath, effectIndex, key, value) => {
+    setEffectDragOverridesState((prev) => {
+      const mapKey = effectDragOverridesKey(nodePath, effectIndex);
+      return {
+        ...prev,
+        [mapKey]: {
+          ...prev[mapKey],
+          [key]: value
+        }
+      };
+    });
+  }, []);
+  const clearEffectDragOverrides = useCallback5((nodePath, effectIndex) => {
+    setEffectDragOverridesState((prev) => {
+      const mapKey = effectDragOverridesKey(nodePath, effectIndex);
+      if (!prev[mapKey]) {
+        return prev;
+      }
+      const next = { ...prev };
+      delete next[mapKey];
+      return next;
+    });
+  }, []);
   const setCodeValues = useCallback5((nodePath, values) => {
     setCodeValuesMapState((prev) => {
-      const key = nodePathToString(nodePath);
+      const key = makeSequencePropsSubscriptionKey(nodePath);
       const prevKey = prev[key];
       const newKey = values(prevKey);
       if (prevKey === newKey) {
@@ -25141,54 +24865,54 @@ var SequenceManagerProvider = ({ children }) => {
   const unregisterSequence = useCallback5((seq) => {
     setSequences((seqs) => seqs.filter((s) => s.id !== seq));
   }, []);
-  const sequenceContext = useMemo14(() => {
+  const sequenceContext = useMemo12(() => {
     return {
       registerSequence,
       sequences,
       unregisterSequence
     };
   }, [registerSequence, sequences, unregisterSequence]);
-  const hiddenContext = useMemo14(() => {
-    return {
-      hidden,
-      setHidden
-    };
-  }, [hidden]);
   const getDragOverrides = useCallback5((nodePath) => {
-    return dragOverrides[nodePathToString(nodePath)] ?? {};
+    return dragOverrides[makeSequencePropsSubscriptionKey(nodePath)] ?? {};
   }, [dragOverrides]);
-  const getCodeValues = useCallback5((nodePath) => {
-    return getCodeValuesCtx(codeValues, nodePath);
-  }, [codeValues]);
-  const codeValuesContext = useMemo14(() => {
+  const getEffectDragOverrides = useCallback5((nodePath, effectIndex) => {
+    return effectDragOverridesState[effectDragOverridesKey(nodePath, effectIndex)] ?? {};
+  }, [effectDragOverridesState]);
+  const codeValuesContext = useMemo12(() => {
     return {
-      getCodeValues
+      codeValues
     };
-  }, [getCodeValues]);
-  const dragOverridesContext = useMemo14(() => {
+  }, [codeValues]);
+  const dragOverridesContext = useMemo12(() => {
     return {
-      getDragOverrides
+      getDragOverrides,
+      getEffectDragOverrides
     };
-  }, [getDragOverrides]);
-  const settersContext = useMemo14(() => {
+  }, [getDragOverrides, getEffectDragOverrides]);
+  const settersContext = useMemo12(() => {
     return {
       setDragOverrides,
       clearDragOverrides,
+      setEffectDragOverrides,
+      clearEffectDragOverrides,
       setCodeValues
     };
-  }, [setDragOverrides, clearDragOverrides, setCodeValues]);
-  return /* @__PURE__ */ jsx112(SequenceManager.Provider, {
+  }, [
+    setDragOverrides,
+    clearDragOverrides,
+    setEffectDragOverrides,
+    clearEffectDragOverrides,
+    setCodeValues
+  ]);
+  return /* @__PURE__ */ jsx102(SequenceManager.Provider, {
     value: sequenceContext,
-    children: /* @__PURE__ */ jsx112(SequenceVisibilityToggleContext.Provider, {
-      value: hiddenContext,
-      children: /* @__PURE__ */ jsx112(VisualModeCodeValuesContext.Provider, {
-        value: codeValuesContext,
-        children: /* @__PURE__ */ jsx112(VisualModeDragOverridesContext.Provider, {
-          value: dragOverridesContext,
-          children: /* @__PURE__ */ jsx112(VisualModeSettersContext.Provider, {
-            value: settersContext,
-            children
-          })
+    children: /* @__PURE__ */ jsx102(VisualModeCodeValuesContext.Provider, {
+      value: codeValuesContext,
+      children: /* @__PURE__ */ jsx102(VisualModeDragOverridesContext.Provider, {
+        value: dragOverridesContext,
+        children: /* @__PURE__ */ jsx102(VisualModeSettersContext.Provider, {
+          value: settersContext,
+          children
         })
       })
     })
@@ -25226,6 +24950,144 @@ var deleteNestedKey = (obj, keysToRemove) => {
   }
   return obj;
 };
+var OverrideIdsToNodePathsGettersContext = createContext15({
+  overrideIdToNodePathMappings: {}
+});
+var OverrideIdsToNodePathsSettersContext = createContext15({
+  setOverrideIdToNodePath: () => {
+    throw new Error("OverrideIdsToNodePathsSettersContext not initialized");
+  }
+});
+var mergeOverrides = ({
+  descriptor,
+  codeOverrides,
+  dragOverrides
+}) => {
+  if (!codeOverrides && !dragOverrides) {
+    return { params: descriptor.params, effectKey: descriptor.effectKey };
+  }
+  const merged = {
+    ...descriptor.params
+  };
+  if (codeOverrides) {
+    for (const [key, value] of Object.entries(codeOverrides)) {
+      if (value !== undefined) {
+        merged[key] = value;
+      }
+    }
+  }
+  if (dragOverrides) {
+    for (const [key, value] of Object.entries(dragOverrides)) {
+      merged[key] = value;
+    }
+  }
+  return {
+    params: merged,
+    effectKey: descriptor.definition.calculateKey(merged)
+  };
+};
+var extractCodeOverrides = (propStatus) => {
+  if (!propStatus) {
+    return null;
+  }
+  const out = {};
+  let hasAny = false;
+  for (const [key, status] of Object.entries(propStatus)) {
+    if (status.canUpdate) {
+      out[key] = status.codeValue;
+      hasAny = true;
+    }
+  }
+  return hasAny ? out : null;
+};
+var useMemoizedEffectDefinitions = (effects) => {
+  const previousRef = useRef5(null);
+  const definitions = effects.map((descriptor) => descriptor.definition);
+  const previous = previousRef.current;
+  const isSame = previous !== null && previous.length === definitions.length && previous.every((def, i) => def === definitions[i]);
+  if (isSame) {
+    return previous;
+  }
+  previousRef.current = definitions;
+  return definitions;
+};
+var getEffectCodeValuesCtx = ({
+  codeValues,
+  nodePath,
+  effectIndex
+}) => {
+  const status = codeValues[makeSequencePropsSubscriptionKey(nodePath)];
+  if (!status) {
+    return { type: "cannot-update-sequence", reason: "not-found" };
+  }
+  if (!status.canUpdate) {
+    return { type: "cannot-update-sequence", reason: status.reason };
+  }
+  const effect = status.effects.find((e) => e.effectIndex === effectIndex);
+  if (!effect) {
+    return { type: "cannot-update-effect", reason: "not-found" };
+  }
+  if (!effect.canUpdate) {
+    return { type: "cannot-update-effect", reason: effect.reason };
+  }
+  return { type: "can-update-effect", props: effect.props };
+};
+var getCodeValuesCtx = (codeValues, nodePath) => {
+  const status = codeValues[makeSequencePropsSubscriptionKey(nodePath)];
+  if (!status) {
+    return;
+  }
+  if (!status.canUpdate) {
+    return;
+  }
+  return status.props;
+};
+var useMemoizedEffects = ({
+  effects,
+  overrideId
+}) => {
+  const previousRef = useRef5(null);
+  const { codeValues } = useContext15(VisualModeCodeValuesContext);
+  const { getEffectDragOverrides } = useContext15(VisualModeDragOverridesContext);
+  const { overrideIdToNodePathMappings } = useContext15(OverrideIdsToNodePathsGettersContext);
+  const previous = previousRef.current;
+  const nodePath = overrideId ? overrideIdToNodePathMappings[overrideId] ?? null : null;
+  const resolved = effects.map((descriptor, index) => {
+    if (nodePath === null) {
+      return {
+        descriptor,
+        params: descriptor.params,
+        effectKey: descriptor.effectKey
+      };
+    }
+    const effectStatus = getEffectCodeValuesCtx({
+      codeValues,
+      nodePath,
+      effectIndex: index
+    });
+    const codeOverrides = effectStatus.type === "can-update-effect" ? extractCodeOverrides(effectStatus.props) : null;
+    const dragOverridesMap = getEffectDragOverrides(nodePath, index);
+    const dragOverrides = Object.keys(dragOverridesMap).length === 0 ? null : dragOverridesMap;
+    const { params, effectKey } = mergeOverrides({
+      descriptor,
+      codeOverrides,
+      dragOverrides
+    });
+    return { descriptor, params, effectKey };
+  });
+  const isSame = previous !== null && previous.length === resolved.length && previous.every((p, i) => p.definition === resolved[i].descriptor.definition && p.effectKey === resolved[i].effectKey);
+  if (isSame) {
+    return previous;
+  }
+  const next = resolved.map(({ descriptor, params, effectKey }) => ({
+    definition: descriptor.definition,
+    effectKey,
+    params,
+    memoized: true
+  }));
+  previousRef.current = next;
+  return next;
+};
 var flattenActiveSchema = (schema, resolve) => {
   const out = {};
   for (const key of Object.keys(schema)) {
@@ -25267,14 +25129,6 @@ var getFlatSchemaWithAllKeys = (schema) => {
   }
   return out;
 };
-var OverrideIdsToNodePathsGettersContext = createContext15({
-  overrideIdToNodePathMappings: {}
-});
-var OverrideIdsToNodePathsSettersContext = createContext15({
-  setOverrideIdToNodePath: () => {
-    throw new Error("OverrideIdsToNodePathsSettersContext not initialized");
-  }
-});
 var findPropsToDelete = ({
   schema,
   key,
@@ -25307,7 +25161,6 @@ var findPropsToDelete = ({
 };
 var getEffectiveVisualModeValue = ({
   codeValue,
-  runtimeValue,
   dragOverrideValue,
   defaultValue,
   shouldResortToDefaultValueIfUndefined = false
@@ -25315,12 +25168,6 @@ var getEffectiveVisualModeValue = ({
   if (dragOverrideValue !== undefined) {
     return dragOverrideValue;
   }
-  if (!codeValue) {
-    return runtimeValue;
-  }
-  if (!codeValue.canUpdate) {
-    return runtimeValue;
-  }
   if (codeValue.codeValue === undefined && shouldResortToDefaultValueIfUndefined) {
     return defaultValue;
   }
@@ -25357,9 +25204,8 @@ var computeEffectiveSchemaValuesDotNotation = ({
     if (field?.type === "hidden") {
       continue;
     }
-    const value = getEffectiveVisualModeValue({
+    const value = codeValueStatus === null || codeValueStatus.canUpdate === false ? currentValue[key] : getEffectiveVisualModeValue({
       codeValue: codeValueStatus,
-      runtimeValue: currentValue[key],
       dragOverrideValue: overrideValues[key],
       defaultValue: field?.default,
       shouldResortToDefaultValueIfUndefined: false
@@ -25439,22 +25285,22 @@ var wrapInSchema = (Component, schema) => {
   const Wrapped = forwardRef2((props, ref) => {
     const env = useRemotionEnvironment();
     if (!env.isStudio || env.isReadOnlyStudio || env.isRendering) {
-      return React13.createElement(Component, {
+      return React12.createElement(Component, {
         ...props,
         _experimentalControls: null,
         ref
       });
     }
-    const { getCodeValues } = useContext15(VisualModeCodeValuesContext);
-    const { getDragOverrides } = useContext15(VisualModeDragOverridesContext);
-    const nodePathMapping = useContext15(OverrideIdsToNodePathsGettersContext);
+    const { codeValues } = useContext16(VisualModeCodeValuesContext);
+    const { getDragOverrides } = useContext16(VisualModeDragOverridesContext);
+    const nodePathMapping = useContext16(OverrideIdsToNodePathsGettersContext);
     if (props._experimentalControls) {
-      return React13.createElement(Component, {
+      return React12.createElement(Component, {
         ...props,
         ref
       });
     }
-    const [overrideId] = useState5(() => {
+    const [overrideId] = useState4(() => {
       const { stack } = props;
       if (!stack) {
         return String(Math.random());
@@ -25469,26 +25315,26 @@ var wrapInSchema = (Component, schema) => {
     });
     const nodePath = nodePathMapping.overrideIdToNodePathMappings[overrideId] ?? null;
     const runtimeValues = flatKeys.map((k) => getNestedValue(props, k));
-    const currentRuntimeValueDotNotation = useMemo15(() => readValuesFromProps(props, flatKeys), runtimeValues);
-    const controls = useMemo15(() => {
+    const currentRuntimeValueDotNotation = useMemo13(() => readValuesFromProps(props, flatKeys), runtimeValues);
+    const controls = useMemo13(() => {
       return {
         schema,
         currentRuntimeValueDotNotation,
         overrideId
       };
     }, [currentRuntimeValueDotNotation, overrideId]);
-    const { merged: valuesDotNotation, propsToDelete } = useMemo15(() => {
+    const { merged: valuesDotNotation, propsToDelete } = useMemo13(() => {
       return computeEffectiveSchemaValuesDotNotation({
         schema,
         currentValue: currentRuntimeValueDotNotation,
         overrideValues: nodePath === null ? {} : getDragOverrides(nodePath),
-        propStatus: nodePath === null ? undefined : getCodeValues(nodePath)
+        propStatus: nodePath === null ? undefined : getCodeValuesCtx(codeValues, nodePath)
       });
     }, [
       currentRuntimeValueDotNotation,
       getDragOverrides,
       nodePath,
-      getCodeValues
+      codeValues
     ]);
     const activeKeys = selectActiveKeys(schema, valuesDotNotation);
     const mergedProps = mergeValues({
@@ -25497,7 +25343,7 @@ var wrapInSchema = (Component, schema) => {
       schemaKeys: activeKeys,
       propsToDelete
     });
-    return React13.createElement(Component, {
+    return React12.createElement(Component, {
       ...mergedProps,
       _experimentalControls: controls,
       ref
@@ -25514,6 +25360,7 @@ var RegularSequenceRefForwardingFunction = ({
   height,
   width,
   showInTimeline = true,
+  hidden = false,
   _experimentalControls: controls,
   _experimentalEffects,
   _remotionInternalLoopDisplay: loopDisplay,
@@ -25524,8 +25371,8 @@ var RegularSequenceRefForwardingFunction = ({
   ...other
 }, ref) => {
   const { layout = "absolute-fill" } = other;
-  const [id] = useState6(() => String(Math.random()));
-  const parentSequence = useContext16(SequenceContext);
+  const [id] = useState5(() => String(Math.random()));
+  const parentSequence = useContext17(SequenceContext);
   const { rootId } = useTimelineContext();
   const cumulatedFrom = parentSequence ? parentSequence.cumulatedFrom + parentSequence.relativeFrom : 0;
   const nonce = useNonce();
@@ -25551,15 +25398,14 @@ var RegularSequenceRefForwardingFunction = ({
   const videoConfig = useVideoConfig();
   const parentSequenceDuration = parentSequence ? Math.min(parentSequence.durationInFrames - from, durationInFrames) : durationInFrames;
   const actualDurationInFrames = Math.max(0, Math.min(videoConfig.durationInFrames - from, parentSequenceDuration));
-  const { registerSequence, unregisterSequence } = useContext16(SequenceManager);
-  const { hidden } = useContext16(SequenceVisibilityToggleContext);
-  const premounting = useMemo16(() => {
+  const { registerSequence, unregisterSequence } = useContext17(SequenceManager);
+  const premounting = useMemo14(() => {
     return parentSequence?.premounting || Boolean(other._remotionInternalIsPremounting);
   }, [other._remotionInternalIsPremounting, parentSequence?.premounting]);
-  const postmounting = useMemo16(() => {
+  const postmounting = useMemo14(() => {
     return parentSequence?.postmounting || Boolean(other._remotionInternalIsPostmounting);
   }, [other._remotionInternalIsPostmounting, parentSequence?.postmounting]);
-  const contextValue = useMemo16(() => {
+  const contextValue = useMemo14(() => {
     return {
       cumulatedFrom,
       relativeFrom: from,
@@ -25586,12 +25432,13 @@ var RegularSequenceRefForwardingFunction = ({
     premountDisplay,
     postmountDisplay
   ]);
-  const timelineClipName = useMemo16(() => {
+  const timelineClipName = useMemo14(() => {
     return name ?? "";
   }, [name]);
   const env = useRemotionEnvironment();
   const inheritedStack = other?.stack ?? null;
-  useEffect5(() => {
+  const [stackDoesntChange] = useState5(() => stack ?? inheritedStack);
+  useEffect3(() => {
     if (!env.isStudio) {
       return;
     }
@@ -25614,7 +25461,7 @@ var RegularSequenceRefForwardingFunction = ({
         rootId,
         showInTimeline,
         src: isMedia.data.src,
-        stack: stack ?? inheritedStack,
+        stack: stackDoesntChange,
         startMediaFrom: isMedia.data.startMediaFrom,
         volume: isMedia.data.volumes
       });
@@ -25633,7 +25480,7 @@ var RegularSequenceRefForwardingFunction = ({
       showInTimeline,
       nonce: nonce.get(),
       loopDisplay,
-      stack: stack ?? inheritedStack,
+      stack: stackDoesntChange,
       premountDisplay: premountDisplay ?? null,
       postmountDisplay: postmountDisplay ?? null,
       controls: controls ?? null,
@@ -25656,11 +25503,10 @@ var RegularSequenceRefForwardingFunction = ({
     showInTimeline,
     nonce,
     loopDisplay,
-    stack,
+    stackDoesntChange,
     premountDisplay,
     postmountDisplay,
     env.isStudio,
-    inheritedStack,
     controls,
     _experimentalEffects,
     isMedia
@@ -25668,7 +25514,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 = useMemo16(() => {
+  const defaultStyle = useMemo14(() => {
     return {
       flexDirection: undefined,
       ...width ? { width } : {},
@@ -25679,13 +25525,12 @@ var RegularSequenceRefForwardingFunction = ({
   if (ref !== null && layout === "none") {
     throw new TypeError('It is not supported to pass both a `ref` and `layout="none"` to <Sequence />.');
   }
-  const isSequenceHidden = hidden[id] ?? false;
-  if (isSequenceHidden) {
+  if (hidden) {
     return null;
   }
-  return /* @__PURE__ */ jsx12(SequenceContext.Provider, {
+  return /* @__PURE__ */ jsx112(SequenceContext.Provider, {
     value: contextValue,
-    children: content === null ? null : other.layout === "none" ? content : /* @__PURE__ */ jsx12(AbsoluteFill, {
+    children: content === null ? null : other.layout === "none" ? content : /* @__PURE__ */ jsx112(AbsoluteFill, {
       ref,
       style: defaultStyle,
       className: other.className,
@@ -25695,7 +25540,7 @@ var RegularSequenceRefForwardingFunction = ({
 };
 var RegularSequence = forwardRef3(RegularSequenceRefForwardingFunction);
 var PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
-  const parentPremountContext = useContext16(PremountContext);
+  const parentPremountContext = useContext17(PremountContext);
   const frame = useCurrentFrame() - parentPremountContext.premountFramesRemaining;
   if (props.layout === "none") {
     throw new Error('`<Sequence>` with `premountFor` and `postmountFor` props does not support layout="none"');
@@ -25715,7 +25560,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 = useMemo16(() => {
+  const style = useMemo14(() => {
     return {
       ...passedStyle,
       opacity: premountingActive || postmountingActive ? 0 : 1,
@@ -25730,10 +25575,10 @@ var PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
     styleWhilePremounted,
     styleWhilePostmounted
   ]);
-  return /* @__PURE__ */ jsx12(Freeze, {
+  return /* @__PURE__ */ jsx112(Freeze, {
     frame: freezeFrame,
     active: isFreezingActive,
-    children: /* @__PURE__ */ jsx12(SequenceInner, {
+    children: /* @__PURE__ */ jsx112(SequenceInner, {
       ref,
       from,
       durationInFrames,
@@ -25753,20 +25598,437 @@ var SequenceRefForwardingFunction = (props, ref) => {
   if (props.layout !== "none" && !env.isRendering) {
     const effectivePremountFor = ENABLE_V5_BREAKING_CHANGES ? props.premountFor ?? fps : props.premountFor;
     if (effectivePremountFor || props.postmountFor) {
-      return /* @__PURE__ */ jsx12(PremountedPostmountedSequence, {
+      return /* @__PURE__ */ jsx112(PremountedPostmountedSequence, {
         ref,
         ...props,
         premountFor: effectivePremountFor
       });
     }
   }
-  return /* @__PURE__ */ jsx12(RegularSequence, {
+  return /* @__PURE__ */ jsx112(RegularSequence, {
     ...props,
     ref
   });
 };
 var SequenceInner = forwardRef3(SequenceRefForwardingFunction);
 var Sequence = wrapInSchema(SequenceInner, sequenceSchema);
+
+class CanvasPool {
+  width;
+  height;
+  pairs = new Map;
+  lostContexts = new Set;
+  constructor(width, height) {
+    this.width = width;
+    this.height = height;
+  }
+  getPair(backend) {
+    const existing = this.pairs.get(backend);
+    if (existing) {
+      return existing;
+    }
+    const pair = [
+      this.allocateCanvas(backend),
+      this.allocateCanvas(backend)
+    ];
+    this.pairs.set(backend, pair);
+    return pair;
+  }
+  assertContextNotLost(canvas) {
+    if (this.lostContexts.has(canvas)) {
+      throw new Error("WebGL context was lost during canvas effect rendering. " + "This typically happens in headless or memory-constrained environments (e.g. Remotion Lambda). " + "Try reducing concurrency or increasing the Lambda function memory.");
+    }
+  }
+  allocateCanvas(backend) {
+    const canvas = document.createElement("canvas");
+    canvas.width = this.width;
+    canvas.height = this.height;
+    switch (backend) {
+      case "2d": {
+        const ctx = canvas.getContext("2d", {
+          colorSpace: "srgb"
+        });
+        if (!ctx) {
+          throw new Error("Failed to acquire 2D context for canvas effect");
+        }
+        return canvas;
+      }
+      case "webgl2": {
+        const ctx = canvas.getContext("webgl2", {
+          premultipliedAlpha: true,
+          alpha: true,
+          preserveDrawingBuffer: true
+        });
+        if (!ctx) {
+          throw new Error("Failed to acquire WebGL2 context for canvas effect");
+        }
+        canvas.addEventListener("webglcontextlost", (e) => {
+          e.preventDefault();
+          this.lostContexts.add(canvas);
+        });
+        canvas.addEventListener("webglcontextrestored", () => {
+          this.lostContexts.delete(canvas);
+        });
+        ctx.pixelStorei(ctx.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
+        return canvas;
+      }
+      case "webgpu": {
+        if (typeof navigator === "undefined" || !("gpu" in navigator)) {
+          throw new Error("WebGPU is not available in this environment for canvas effect");
+        }
+        return canvas;
+      }
+      default: {
+        const exhaustive = backend;
+        throw new Error(`Unknown effect backend: ${exhaustive}`);
+      }
+    }
+  }
+}
+var groupByBackend = (effects) => {
+  const runs = [];
+  let current = [];
+  let currentBackend = null;
+  for (const eff of effects) {
+    const { backend } = eff.definition;
+    if (currentBackend === null || backend === currentBackend) {
+      current.push(eff);
+      currentBackend = backend;
+    } else {
+      runs.push({ backend: currentBackend, effects: current });
+      current = [eff];
+      currentBackend = backend;
+    }
+  }
+  if (currentBackend !== null && current.length > 0) {
+    runs.push({ backend: currentBackend, effects: current });
+  }
+  return runs;
+};
+var devicePromise = null;
+var getGpuDevice = () => {
+  if (devicePromise) {
+    return devicePromise;
+  }
+  devicePromise = (async () => {
+    if (typeof navigator === "undefined" || !("gpu" in navigator)) {
+      throw new Error("WebGPU is not available in this environment");
+    }
+    const { gpu } = navigator;
+    const adapter = await gpu.requestAdapter();
+    if (!adapter) {
+      throw new Error("No WebGPU adapter available");
+    }
+    return adapter.requestDevice();
+  })();
+  return devicePromise;
+};
+var createEffectChainState = (width, height) => ({
+  pool: new CanvasPool(width, height),
+  setupCache: new WeakMap,
+  cleanupRegistry: [],
+  currentRunId: 0
+});
+var cleanupEffectChainState = (state) => {
+  state.currentRunId++;
+  for (const entry of state.cleanupRegistry) {
+    entry.definition.cleanup(entry.state);
+  }
+};
+var ensureSetup = (state, def, target) => {
+  const widened = def;
+  if (state.setupCache.has(widened)) {
+    return state.setupCache.get(widened);
+  }
+  const setupState = def.setup(target);
+  state.setupCache.set(widened, setupState);
+  state.cleanupRegistry.push({ definition: widened, state: setupState });
+  return setupState;
+};
+var runEffectChain = async ({
+  state,
+  source,
+  effects,
+  output,
+  width,
+  height
+}) => {
+  const runId = ++state.currentRunId;
+  const isCancelled = () => state.currentRunId !== runId;
+  const enabledEffects = effects.filter((e) => !e.params.disabled);
+  const runs = groupByBackend(enabledEffects);
+  let currentImage = source;
+  let lastTarget = null;
+  if (runs.length === 0) {
+    if (source === output) {
+      return true;
+    }
+    const ctx = output.getContext("2d");
+    if (!ctx) {
+      throw new Error("Failed to acquire 2D context for output canvas");
+    }
+    ctx.clearRect(0, 0, width, height);
+    ctx.drawImage(currentImage, 0, 0, width, height);
+    return true;
+  }
+  let needsGpuDevice = false;
+  for (const run of runs) {
+    if (run.backend === "webgpu") {
+      needsGpuDevice = true;
+      break;
+    }
+  }
+  const gpuDevice = needsGpuDevice ? await getGpuDevice() : null;
+  if (isCancelled()) {
+    return false;
+  }
+  for (let runIndex = 0;runIndex < runs.length; runIndex++) {
+    const run = runs[runIndex];
+    const [a, b] = state.pool.getPair(run.backend);
+    let dst = a;
+    for (const eff of run.effects) {
+      const def = eff.definition;
+      const setupState = ensureSetup(state, def, dst);
+      def.apply({
+        source: currentImage,
+        target: dst,
+        state: setupState,
+        params: eff.params,
+        width,
+        height,
+        gpuDevice
+      });
+      if (run.backend === "webgl2") {
+        state.pool.assertContextNotLost(dst);
+      }
+      currentImage = dst;
+      dst = dst === a ? b : a;
+    }
+    lastTarget = currentImage ?? lastTarget;
+    const nextRun = runs[runIndex + 1];
+    if (nextRun && nextRun.backend !== run.backend && lastTarget) {
+      const bitmap = await createImageBitmap(lastTarget);
+      if (isCancelled()) {
+        bitmap.close();
+        return false;
+      }
+      currentImage = bitmap;
+    }
+  }
+  if (!lastTarget) {
+    return true;
+  }
+  const outCtx = output.getContext("2d");
+  if (!outCtx) {
+    throw new Error("Failed to acquire 2D context for output canvas");
+  }
+  outCtx.clearRect(0, 0, width, height);
+  outCtx.drawImage(lastTarget, 0, 0, width, height);
+  return true;
+};
+var useEffectChainState = () => {
+  const chainStateRef = useRef6(null);
+  const sizeRef = useRef6(null);
+  useEffect4(() => {
+    return () => {
+      if (chainStateRef.current) {
+        cleanupEffectChainState(chainStateRef.current);
+      }
+    };
+  }, []);
+  return useMemo15(() => ({
+    get: (width, height) => {
+      if (!sizeRef.current || sizeRef.current.width !== width || sizeRef.current.height !== height) {
+        if (chainStateRef.current) {
+          cleanupEffectChainState(chainStateRef.current);
+        }
+        chainStateRef.current = createEffectChainState(width, height);
+        sizeRef.current = { width, height };
+      }
+      return chainStateRef.current;
+    }
+  }), []);
+};
+var solidSchema = {
+  color: {
+    type: "color",
+    default: "#ffffff",
+    description: "Color"
+  },
+  width: {
+    type: "number",
+    min: 1,
+    step: 1,
+    default: 1920,
+    description: "Width"
+  },
+  height: {
+    type: "number",
+    min: 1,
+    step: 1,
+    default: 1080,
+    description: "Height"
+  },
+  ...sequenceStyleSchema
+};
+var SolidInner = ({
+  color,
+  width,
+  height,
+  _experimentalEffects: experimentalEffects = [],
+  className,
+  style,
+  overrideId,
+  ref
+}) => {
+  const { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
+  const [outputCanvas, setOutputCanvas] = useState6(null);
+  const memoizedEffects = useMemoizedEffects({
+    effects: experimentalEffects,
+    overrideId: overrideId ?? null
+  });
+  const sourceCanvas = useMemo16(() => {
+    if (typeof document === "undefined") {
+      return null;
+    }
+    const canvas = document.createElement("canvas");
+    canvas.width = 1;
+    canvas.height = 1;
+    return canvas;
+  }, []);
+  const chainState = useEffectChainState();
+  const canvasRef = useCallback6((canvas) => {
+    setOutputCanvas(canvas);
+    if (typeof ref === "function") {
+      ref(canvas);
+    } else if (ref) {
+      ref.current = canvas;
+    }
+  }, [ref]);
+  useEffect5(() => {
+    if (!outputCanvas || !sourceCanvas) {
+      return;
+    }
+    const handle = delayRender2("Solid effect chain");
+    if (!chainState) {
+      continueRender2(handle);
+      return () => {
+        continueRender2(handle);
+      };
+    }
+    const ctx = sourceCanvas.getContext("2d", { colorSpace: "srgb" });
+    if (!ctx) {
+      cancelRender2(new Error("Failed to acquire 2D context for <Solid> source"));
+      return;
+    }
+    ctx.fillStyle = color;
+    ctx.fillRect(0, 0, 1, 1);
+    runEffectChain({
+      state: chainState.get(width, height),
+      source: sourceCanvas,
+      effects: memoizedEffects,
+      output: outputCanvas,
+      width,
+      height
+    }).then((completed) => {
+      if (completed) {
+        continueRender2(handle);
+      }
+    }).catch((err) => {
+      cancelRender2(err);
+    });
+    return () => {
+      continueRender2(handle);
+    };
+  }, [
+    color,
+    outputCanvas,
+    sourceCanvas,
+    chainState,
+    width,
+    height,
+    delayRender2,
+    continueRender2,
+    cancelRender2,
+    memoizedEffects
+  ]);
+  return /* @__PURE__ */ jsx12("canvas", {
+    ref: canvasRef,
+    width,
+    height,
+    className,
+    style
+  });
+};
+var SolidOuter = forwardRef4(({
+  _experimentalEffects = [],
+  _experimentalControls: controls,
+  color,
+  height,
+  width,
+  className,
+  durationInFrames,
+  style,
+  name,
+  from,
+  hidden,
+  showInTimeline,
+  ...props
+}, ref) => {
+  const memoizedEffectDefinitions = useMemoizedEffectDefinitions(_experimentalEffects);
+  return /* @__PURE__ */ jsx12(Sequence, {
+    layout: "none",
+    from,
+    hidden,
+    showInTimeline,
+    _experimentalControls: controls,
+    _experimentalEffects: memoizedEffectDefinitions,
+    durationInFrames,
+    name: name ?? "<Solid>",
+    ...props,
+    children: /* @__PURE__ */ jsx12(SolidInner, {
+      ref,
+      overrideId: controls?.overrideId ?? null,
+      color,
+      height,
+      width,
+      className,
+      style,
+      _experimentalEffects
+    })
+  });
+});
+var Solid = wrapInSchema(SolidOuter, solidSchema);
+Solid.displayName = "Solid";
+addSequenceStackTraces(Solid);
+var VERSION = "4.0.463";
+var checkMultipleRemotionVersions = () => {
+  if (typeof globalThis === "undefined") {
+    return;
+  }
+  const set = () => {
+    globalThis.remotion_imported = VERSION;
+    if (typeof window !== "undefined") {
+      window.remotion_imported = VERSION;
+    }
+  };
+  const alreadyImported = globalThis.remotion_imported || typeof window !== "undefined" && window.remotion_imported;
+  if (alreadyImported) {
+    if (alreadyImported === VERSION) {
+      return;
+    }
+    if (typeof alreadyImported === "string" && alreadyImported.includes("webcodecs")) {
+      set();
+      return;
+    }
+    throw new TypeError(`\uD83D\uDEA8 Multiple versions of Remotion detected: ${[
+      VERSION,
+      typeof alreadyImported === "string" ? alreadyImported : "an older version"
+    ].filter(truthy2).join(" and ")}. This will cause things to break in an unexpected way.
+Check that all your Remotion packages are on the same version. If your dependencies depend on Remotion, make them peer dependencies. You can also run \`npx remotion versions\` from your terminal to see which versions are mismatching.`);
+  }
+  set();
+};
 var calcArgs = (fit, frameSize, canvasSize) => {
   switch (fit) {
     case "fill": {
@@ -25817,7 +26079,7 @@ var calcArgs = (fit, frameSize, canvasSize) => {
 };
 var CanvasRefForwardingFunction = ({ width, height, fit, className, style }, ref) => {
   const canvasRef = useRef7(null);
-  const draw = useCallback6((imageData) => {
+  const draw = useCallback7((imageData) => {
     const canvas = canvasRef.current;
     const canvasWidth = width ?? imageData.displayWidth;
     const canvasHeight = height ?? imageData.displayHeight;
@@ -26009,7 +26271,19 @@ var resolveAnimatedImageSource = (src) => {
   }
   return new URL(src, window.origin).href;
 };
-var AnimatedImage = forwardRef4(({
+var animatedImageSchema = {
+  playbackRate: {
+    type: "number",
+    min: 0,
+    max: 10,
+    step: 0.1,
+    default: 1,
+    description: "Playback Rate"
+  },
+  ...sequenceStyleSchema,
+  hidden: hiddenField
+};
+var AnimatedImageContent = forwardRef5(({
   src,
   width,
   height,
@@ -26116,6 +26390,52 @@ var AnimatedImage = forwardRef4(({
     ...props
   });
 });
+AnimatedImageContent.displayName = "AnimatedImageContent";
+var AnimatedImageInner = ({
+  src,
+  width,
+  height,
+  onError,
+  fit,
+  playbackRate,
+  loopBehavior,
+  id,
+  className,
+  style,
+  durationInFrames,
+  _experimentalControls: controls,
+  ref,
+  ...sequenceProps
+}) => {
+  const { durationInFrames: videoDuration } = useVideoConfig();
+  const resolvedDuration = durationInFrames ?? videoDuration;
+  const animatedImageProps = {
+    src,
+    width,
+    height,
+    onError,
+    fit,
+    playbackRate,
+    loopBehavior,
+    id,
+    className,
+    style
+  };
+  return /* @__PURE__ */ jsx14(Sequence, {
+    layout: "none",
+    durationInFrames: resolvedDuration,
+    name: "<AnimatedImage>",
+    _experimentalControls: controls,
+    ...sequenceProps,
+    children: /* @__PURE__ */ jsx14(AnimatedImageContent, {
+      ...animatedImageProps,
+      ref
+    })
+  });
+};
+var AnimatedImage = wrapInSchema(AnimatedImageInner, animatedImageSchema);
+AnimatedImage.displayName = "AnimatedImage";
+addSequenceStackTraces(AnimatedImage);
 var cachedSupport = null;
 var isHtmlInCanvasSupported = () => {
   if (cachedSupport !== null) {
@@ -26129,6 +26449,7 @@ var isHtmlInCanvasSupported = () => {
   cachedSupport = typeof ctx?.drawElementImage === "function" && typeof canvas.requestPaint === "function" && typeof canvas.captureElementImage === "function";
   return cachedSupport;
 };
+var HTML_IN_CANVAS_UNSUPPORTED_MESSAGE = "HTML in Canvas is not supported. Two common causes: Chrome is older than version 148 (update Chrome), or the HTML-in-Canvas flag is disabled at chrome://flags/#canvas-draw-element (enable it and restart Chrome).";
 function assertHtmlInCanvasDimensions(width, height) {
   if (typeof width !== "number" || typeof height !== "number") {
     throw new Error(`HtmlInCanvas: \`width\` and \`height\` must be numbers. Received width=${String(width)}, height=${String(height)}.`);
@@ -26154,30 +26475,16 @@ var defaultOnPaint = ({
   element.style.transform = transform.toString();
 };
 var HtmlInCanvasAncestorContext = createContext16(false);
-var HtmlInCanvasInner = forwardRef5(({
-  width,
-  height,
-  _experimentalEffects: effects = [],
-  children,
-  onPaint,
-  onInit,
-  _experimentalControls: controls,
-  style,
-  durationInFrames,
-  ...sequenceProps
-}, ref) => {
-  const isInsideAncestorHtmlInCanvas = useContext17(HtmlInCanvasAncestorContext);
+var HtmlInCanvasContent = forwardRef6(({ width, height, effects, children, onPaint, onInit, controls, style }, ref) => {
+  const isInsideAncestorHtmlInCanvas = useContext18(HtmlInCanvasAncestorContext);
   assertHtmlInCanvasDimensions(width, height);
   const { continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
   if (!isHtmlInCanvasSupported()) {
-    cancelRender2(new Error("HTML in Canvas is not supported. Open this page in Chrome Canary with chrome://flags/#canvas-draw-element enabled."));
+    cancelRender2(new Error(HTML_IN_CANVAS_UNSUPPORTED_MESSAGE));
   }
-  const { durationInFrames: videoDuration } = useVideoConfig();
-  const resolvedDuration = durationInFrames ?? videoDuration;
-  const frame = useCurrentFrame();
   const canvas2dRef = useRef9(null);
   const divRef = useRef9(null);
-  const setLayoutCanvasRef = useCallback7((node) => {
+  const setLayoutCanvasRef = useCallback8((node) => {
     canvas2dRef.current = node;
     if (typeof ref === "function") {
       ref(node);
@@ -26187,11 +26494,12 @@ var HtmlInCanvasInner = forwardRef5(({
   }, [ref]);
   const [offscreenCanvas] = useState8(() => new OffscreenCanvas(1, 1));
   const chainState = useEffectChainState();
-  const memoizedEffects = useMemoizedEffects(flattenEffects(effects));
+  const memoizedEffects = useMemoizedEffects({
+    effects,
+    overrideId: controls?.overrideId ?? null
+  });
   const effectsRef = useRef9(memoizedEffects);
   effectsRef.current = memoizedEffects;
-  const frameRef = useRef9(frame);
-  frameRef.current = frame;
   const onPaintRef = useRef9(onPaint);
   onPaintRef.current = onPaint;
   const onInitRef = useRef9(onInit);
@@ -26199,7 +26507,7 @@ var HtmlInCanvasInner = forwardRef5(({
   const initializedRef = useRef9(false);
   const onInitCleanupRef = useRef9(null);
   const unmountedRef = useRef9(false);
-  const onPaintCb = useCallback7(async () => {
+  const onPaintCb = useCallback8(async () => {
     const element = divRef.current;
     if (!element) {
       throw new Error("Canvas or scene element not found");
@@ -26248,7 +26556,6 @@ var HtmlInCanvasInner = forwardRef5(({
         source: offscreenCanvas,
         effects: effectsRef.current,
         output: canvas2dRef.current,
-        frame: frameRef.current,
         width,
         height
       });
@@ -26312,31 +26619,64 @@ var HtmlInCanvasInner = forwardRef5(({
   if (isInsideAncestorHtmlInCanvas) {
     throw new Error("<HtmlInCanvas> effects cannot be nested together. Chrome will only display the outer effect. Consider merging the effects into one if you can.");
   }
+  return /* @__PURE__ */ jsx15(HtmlInCanvasAncestorContext.Provider, {
+    value: true,
+    children: /* @__PURE__ */ jsx15("canvas", {
+      ref: setLayoutCanvasRef,
+      width,
+      height,
+      style,
+      children: /* @__PURE__ */ jsx15("div", {
+        ref: divRef,
+        style: innerStyle,
+        children
+      })
+    })
+  });
+});
+HtmlInCanvasContent.displayName = "HtmlInCanvasContent";
+var HtmlInCanvasInner = forwardRef6(({
+  width,
+  height,
+  _experimentalEffects: effects = [],
+  children,
+  onPaint,
+  onInit,
+  _experimentalControls: controls,
+  style,
+  durationInFrames,
+  name,
+  ...sequenceProps
+}, ref) => {
+  const { durationInFrames: videoDuration } = useVideoConfig();
+  const resolvedDuration = durationInFrames ?? videoDuration;
+  const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
   return /* @__PURE__ */ jsx15(Sequence, {
     durationInFrames: resolvedDuration,
-    name: "<HtmlInCanvas>",
+    name: name ?? "<HtmlInCanvas>",
     _experimentalControls: controls,
-    _experimentalEffects: memoizedEffects,
+    _experimentalEffects: memoizedEffectDefinitions,
     layout: "none",
     ...sequenceProps,
-    children: /* @__PURE__ */ jsx15(HtmlInCanvasAncestorContext.Provider, {
-      value: true,
-      children: /* @__PURE__ */ jsx15("canvas", {
-        ref: setLayoutCanvasRef,
-        width,
-        height,
-        style,
-        children: /* @__PURE__ */ jsx15("div", {
-          ref: divRef,
-          style: innerStyle,
-          children
-        })
-      })
+    children: /* @__PURE__ */ jsx15(HtmlInCanvasContent, {
+      ref,
+      width,
+      height,
+      effects,
+      onPaint,
+      onInit,
+      controls,
+      style,
+      children
     })
   });
 });
 HtmlInCanvasInner.displayName = "HtmlInCanvas";
-var HtmlInCanvasWrapped = wrapInSchema(HtmlInCanvasInner, sequenceStyleSchema);
+var htmlInCanvasSchema = {
+  ...sequenceStyleSchema,
+  hidden: hiddenField
+};
+var HtmlInCanvasWrapped = wrapInSchema(HtmlInCanvasInner, htmlInCanvasSchema);
 var HtmlInCanvas = Object.assign(HtmlInCanvasWrapped, {
   isSupported: isHtmlInCanvasSupported
 });
@@ -26383,7 +26723,7 @@ var RenderAssetManager = createContext17({
 var RenderAssetManagerProvider = ({ children, collectAssets }) => {
   const [renderAssets, setRenderAssets] = useState9([]);
   const renderAssetsRef = useRef10([]);
-  const registerRenderAsset = useCallback8((renderAsset) => {
+  const registerRenderAsset = useCallback9((renderAsset) => {
     validateRenderAsset(renderAsset);
     renderAssetsRef.current = [...renderAssetsRef.current, renderAsset];
     setRenderAssets(renderAssetsRef.current);
@@ -26400,7 +26740,7 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
       };
     }, []);
   }
-  const unregisterRenderAsset = useCallback8((id) => {
+  const unregisterRenderAsset = useCallback9((id) => {
     renderAssetsRef.current = renderAssetsRef.current.filter((a) => a.id !== id);
     setRenderAssets(renderAssetsRef.current);
   }, []);
@@ -26428,7 +26768,7 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
 };
 var ArtifactThumbnail = Symbol("Thumbnail");
 var Artifact = ({ filename, content, downloadBehavior }) => {
-  const { registerRenderAsset, unregisterRenderAsset } = useContext18(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext19(RenderAssetManager);
   const env = useRemotionEnvironment();
   const frame = useCurrentFrame();
   const [id] = useState10(() => {
@@ -26618,7 +26958,7 @@ var getSrcWithoutHash = (src) => {
   return src.slice(0, hashIndex);
 };
 var usePreload = (src) => {
-  const preloads2 = useContext19(PreloadContext);
+  const preloads2 = useContext20(PreloadContext);
   const hashFragmentIndex = removeAndGetHashFragment(src);
   const withoutHashFragment = getSrcWithoutHash(src);
   if (!preloads2[withoutHashFragment]) {
@@ -26800,6 +27140,9 @@ var validateMediaProps = (props, component) => {
   if (typeof props.playbackRate === "number" && (isNaN(props.playbackRate) || !Number.isFinite(props.playbackRate) || props.playbackRate <= 0)) {
     throw new TypeError(`You have passed a playbackRate of ${props.playbackRate} to your <${component} /> component. Playback rate must be a real number above 0.`);
   }
+  if (typeof props.preservePitch !== "boolean" && typeof props.preservePitch !== "undefined") {
+    throw new TypeError(`'preservePitch' must be a boolean or undefined but got '${typeof props.preservePitch}' instead`);
+  }
 };
 var validateStartFromProps = (startFrom, endAt) => {
   if (typeof startFrom !== "undefined") {
@@ -27145,7 +27488,7 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled })
   }, []);
   const prevEndTimes = useRef11({ scheduledEndTime: null, mediaEndTime: null });
   const nodesToResume = useRef11(new Map);
-  const unscheduleAudioNode = useCallback9((node) => {
+  const unscheduleAudioNode = useCallback10((node) => {
     nodesToResume.current.delete(node);
   }, []);
   const scheduleAudioNode = useMemo22(() => {
@@ -27193,7 +27536,7 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled })
       };
     };
   }, [ctxAndGain, logLevel]);
-  const resume = useCallback9(() => {
+  const resume = useCallback10(() => {
     if (!ctxAndGain) {
       return Promise.resolve();
     }
@@ -27220,10 +27563,10 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled })
     });
     return resumePromise.catch(() => {});
   }, [ctxAndGain, logLevel]);
-  const getIsResumingAudioContext = useCallback9(() => {
+  const getIsResumingAudioContext = useCallback10(() => {
     return isResuming.current;
   }, []);
-  const suspend = useCallback9(() => {
+  const suspend = useCallback10(() => {
     if (!ctxAndGain) {
       return;
     }
@@ -27269,7 +27612,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const env = useRemotionEnvironment();
-  const audioCtx = useContext20(SharedAudioContext);
+  const audioCtx = useContext21(SharedAudioContext);
   const audioContext = audioCtx?.audioContext ?? null;
   const resume = audioCtx?.resume;
   const refs = useMemo22(() => {
@@ -27296,7 +27639,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     };
   }, [refs]);
   const takenAudios = useRef11(new Array(numberOfAudioTags).fill(false));
-  const rerenderAudios = useCallback9(() => {
+  const rerenderAudios = useCallback10(() => {
     refs.forEach(({ ref, id }) => {
       const data = audios.current?.find((a) => a.id === id);
       const { current } = ref;
@@ -27317,7 +27660,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
       });
     });
   }, [refs]);
-  const registerAudio = useCallback9((options) => {
+  const registerAudio = useCallback10((options) => {
     const { aud, audioId, premounting, postmounting } = options;
     const found = audios.current?.find((a) => a.audioId === audioId);
     if (found) {
@@ -27346,7 +27689,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     rerenderAudios();
     return newElem;
   }, [numberOfAudioTags, refs, rerenderAudios]);
-  const unregisterAudio = useCallback9((id) => {
+  const unregisterAudio = useCallback10((id) => {
     const cloned = [...takenAudios.current];
     const index = refs.findIndex((r2) => r2.id === id);
     if (index === -1) {
@@ -27357,7 +27700,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     audios.current = audios.current?.filter((a) => a.id !== id);
     rerenderAudios();
   }, [refs, rerenderAudios]);
-  const updateAudio = useCallback9(({
+  const updateAudio = useCallback10(({
     aud,
     audioId,
     id,
@@ -27391,7 +27734,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
       rerenderAudios();
     }
   }, [rerenderAudios]);
-  const playAllAudios = useCallback9(() => {
+  const playAllAudios = useCallback10(() => {
     refs.forEach((ref) => {
       const audio = audios.current.find((a) => a.el === ref.ref);
       if (audio?.premounting) {
@@ -27444,8 +27787,8 @@ var useSharedAudio = ({
   premounting,
   postmounting
 }) => {
-  const audioCtx = useContext20(SharedAudioContext);
-  const tagsCtx = useContext20(SharedAudioTagsContext);
+  const audioCtx = useContext21(SharedAudioContext);
+  const tagsCtx = useContext21(SharedAudioTagsContext);
   const [elem] = useState12(() => {
     if (tagsCtx && tagsCtx.numberOfAudioTags > 0) {
       return tagsCtx.registerAudio({ aud, audioId, premounting, postmounting });
@@ -27624,7 +27967,7 @@ var useVolume = ({
   const audioStuffRef = useRef13(null);
   const currentVolumeRef = useRef13(volume);
   currentVolumeRef.current = volume;
-  const sharedAudioContext = useContext21(SharedAudioContext);
+  const sharedAudioContext = useContext22(SharedAudioContext);
   if (!sharedAudioContext) {
     throw new Error("useAmplification must be used within a SharedAudioContext");
   }
@@ -27689,7 +28032,7 @@ var useVolume = ({
   return audioStuffRef;
 };
 var useMediaStartsAt = () => {
-  const parentSequence = useContext22(SequenceContext);
+  const parentSequence = useContext23(SequenceContext);
   const startsAt = Math.min(0, parentSequence?.relativeFrom ?? 0);
   return startsAt;
 };
@@ -27778,7 +28121,7 @@ var useBasicMediaInTimeline = ({
   if (!src) {
     throw new Error("No src passed");
   }
-  const parentSequence = useContext23(SequenceContext);
+  const parentSequence = useContext24(SequenceContext);
   const [initialVolume] = useState13(() => volume);
   const duration = getTimelineDuration({
     compositionDurationInFrames: sequenceDurationInFrames,
@@ -27845,8 +28188,8 @@ var useImageInTimeline = ({
   loopDisplay,
   controls
 }) => {
-  const parentSequence = useContext23(SequenceContext);
-  const { registerSequence, unregisterSequence } = useContext23(SequenceManager);
+  const parentSequence = useContext24(SequenceContext);
+  const { registerSequence, unregisterSequence } = useContext24(SequenceManager);
   const { durationInFrames } = useVideoConfig();
   const mediaStartsAt = useMediaStartsAt();
   const { duration, nonce, rootId, finalDisplayName } = useBasicMediaInTimeline({
@@ -27927,9 +28270,9 @@ var useMediaInTimeline = ({
   postmountDisplay,
   loopDisplay
 }) => {
-  const parentSequence = useContext23(SequenceContext);
+  const parentSequence = useContext24(SequenceContext);
   const startsAt = useMediaStartsAt();
-  const { registerSequence, unregisterSequence } = useContext23(SequenceManager);
+  const { registerSequence, unregisterSequence } = useContext24(SequenceManager);
   const { durationInFrames } = useVideoConfig();
   const mediaStartsAt = useMediaStartsAt();
   const { volumes, duration, doesVolumeChange, nonce, rootId, finalDisplayName } = useBasicMediaInTimeline({
@@ -28011,7 +28354,7 @@ var useBufferManager = (logLevel, mountTime) => {
   const env = useRemotionEnvironment();
   const rendering = env.isRendering;
   const buffering = useRef14(false);
-  const addBlock = useCallback10((block) => {
+  const addBlock = useCallback11((block) => {
     if (rendering) {
       return {
         unblock: () => {
@@ -28037,7 +28380,7 @@ var useBufferManager = (logLevel, mountTime) => {
       }
     };
   }, [rendering]);
-  const listenForBuffering = useCallback10((callback) => {
+  const listenForBuffering = useCallback11((callback) => {
     setOnBufferingCallbacks((c) => [...c, callback]);
     return {
       remove: () => {
@@ -28045,7 +28388,7 @@ var useBufferManager = (logLevel, mountTime) => {
       }
     };
   }, []);
-  const listenForResume = useCallback10((callback) => {
+  const listenForResume = useCallback11((callback) => {
     setOnResumeCallbacks((c) => [...c, callback]);
     return {
       remove: () => {
@@ -28089,7 +28432,7 @@ var useBufferManager = (logLevel, mountTime) => {
 };
 var BufferingContextReact = React21.createContext(null);
 var BufferingProvider = ({ children }) => {
-  const { logLevel, mountTime } = useContext24(LogLevelContext);
+  const { logLevel, mountTime } = useContext25(LogLevelContext);
   const bufferManager = useBufferManager(logLevel ?? "info", mountTime);
   return /* @__PURE__ */ jsx21(BufferingContextReact.Provider, {
     value: bufferManager,
@@ -28119,7 +28462,7 @@ var useIsPlayerBuffering = (bufferManager) => {
   return isBuffering;
 };
 var useBufferState = () => {
-  const buffer = useContext25(BufferingContextReact);
+  const buffer = useContext26(BufferingContextReact);
   const logLevel = useLogLevel();
   const addBlock = buffer ? buffer.addBlock : null;
   return useMemo25(() => ({
@@ -28159,7 +28502,7 @@ var useBufferUntilFirstFrame = ({
 }) => {
   const bufferingRef = useRef15(false);
   const { delayPlayback } = useBufferState();
-  const bufferUntilFirstFrame = useCallback11((requestedTime) => {
+  const bufferUntilFirstFrame = useCallback12((requestedTime) => {
     if (mediaType !== "video") {
       return;
     }
@@ -28530,6 +28873,23 @@ function checkInfiniteRange(name, arr) {
     }
   }
 }
+function assertValidInterpolateEasingOption(easing, inputRangeLength) {
+  if (easing === undefined) {
+    return;
+  }
+  if (typeof easing === "function") {
+    return;
+  }
+  const expectedLength = inputRangeLength - 1;
+  if (easing.length !== expectedLength) {
+    throw new Error(`When easing is an array, it must have one entry per segment between keyframes (length inputRange.length - 1 = ${expectedLength}), but got length ${easing.length}`);
+  }
+  for (let i = 0;i < easing.length; i++) {
+    if (typeof easing[i] !== "function") {
+      throw new Error(`easing[${i}] must be a function`);
+    }
+  }
+}
 function interpolate2(input, inputRange, outputRange, options) {
   if (typeof input === "undefined") {
     throw new Error("input can not be undefined");
@@ -28546,7 +28906,18 @@ function interpolate2(input, inputRange, outputRange, options) {
   checkInfiniteRange("inputRange", inputRange);
   checkInfiniteRange("outputRange", outputRange);
   checkValidInputRange(inputRange);
-  const easing = options?.easing ?? ((num) => num);
+  assertValidInterpolateEasingOption(options?.easing, inputRange.length);
+  const easingOption = options?.easing;
+  const defaultEasing = (num) => num;
+  const resolveEasingForSegment = (segmentIndex) => {
+    if (easingOption === undefined) {
+      return defaultEasing;
+    }
+    if (typeof easingOption === "function") {
+      return easingOption;
+    }
+    return easingOption[segmentIndex];
+  };
   let extrapolateLeft = "extend";
   if (options?.extrapolateLeft !== undefined) {
     extrapolateLeft = options.extrapolateLeft;
@@ -28560,7 +28931,7 @@ function interpolate2(input, inputRange, outputRange, options) {
   }
   const range = findRange(input, inputRange);
   return interpolateFunction(input, [inputRange[range], inputRange[range + 1]], [outputRange[range], outputRange[range + 1]], {
-    easing,
+    easing: resolveEasingForSegment(range),
     extrapolateLeft,
     extrapolateRight
   });
@@ -28625,6 +28996,7 @@ var useMediaPlayback = ({
   src,
   mediaType,
   playbackRate: localPlaybackRate,
+  preservePitch = true,
   onlyWarnForMediaSeekingError,
   acceptableTimeshift,
   pauseWhenBuffering,
@@ -28636,7 +29008,7 @@ var useMediaPlayback = ({
   const frame = useCurrentFrame();
   const absoluteFrame = useTimelinePosition();
   const [playing] = usePlayingState();
-  const buffering = useContext26(BufferingContextReact);
+  const buffering = useContext27(BufferingContextReact);
   const { fps } = useVideoConfig();
   const mediaStartsAt = useMediaStartsAt();
   const lastSeekDueToShift = useRef17(null);
@@ -28647,7 +29019,7 @@ var useMediaPlayback = ({
     throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
   }
   const isVariableFpsVideoMap = useRef17({});
-  const onVariableFpsVideoDetected = useCallback12(() => {
+  const onVariableFpsVideoDetected = useCallback13(() => {
     if (!src) {
       return;
     }
@@ -28742,7 +29114,10 @@ var useMediaPlayback = ({
     if (mediaRef.current && mediaRef.current.playbackRate !== playbackRateToSet) {
       mediaRef.current.playbackRate = playbackRateToSet;
     }
-  }, [mediaRef, playbackRate]);
+    if (mediaRef.current && mediaRef.current.preservesPitch !== preservePitch) {
+      mediaRef.current.preservesPitch = preservePitch;
+    }
+  }, [mediaRef, playbackRate, preservePitch]);
   useEffect12(() => {
     const tagName = mediaType === "audio" ? "<Html5Audio>" : "<Html5Video>";
     if (!mediaRef.current) {
@@ -28924,15 +29299,15 @@ var SetMediaVolumeContext = createContext22({
   }
 });
 var useMediaVolumeState = () => {
-  const { mediaVolume } = useContext27(MediaVolumeContext);
-  const { setMediaVolume } = useContext27(SetMediaVolumeContext);
+  const { mediaVolume } = useContext28(MediaVolumeContext);
+  const { setMediaVolume } = useContext28(SetMediaVolumeContext);
   return useMemo27(() => {
     return [mediaVolume, setMediaVolume];
   }, [mediaVolume, setMediaVolume]);
 };
 var useMediaMutedState = () => {
-  const { mediaMuted } = useContext27(MediaVolumeContext);
-  const { setMediaMuted } = useContext27(SetMediaVolumeContext);
+  const { mediaMuted } = useContext28(MediaVolumeContext);
+  const { setMediaMuted } = useContext28(SetMediaVolumeContext);
   return useMemo27(() => {
     return [mediaMuted, setMediaMuted];
   }, [mediaMuted, setMediaMuted]);
@@ -28952,6 +29327,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     volume,
     muted,
     playbackRate,
+    preservePitch,
     shouldPreMountAudioTags,
     src,
     onDuration,
@@ -28982,14 +29358,12 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
   const [mediaVolume] = useMediaVolumeState();
   const [mediaMuted] = useMediaMutedState();
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
-  const { hidden } = useContext28(SequenceVisibilityToggleContext);
   if (!src) {
     throw new TypeError("No 'src' was passed to <Html5Audio>.");
   }
   const preloadedSrc = usePreload(src);
-  const sequenceContext = useContext28(SequenceContext);
+  const sequenceContext = useContext29(SequenceContext);
   const [timelineId] = useState16(() => String(Math.random()));
-  const isSequenceHidden = hidden[timelineId] ?? false;
   const userPreferredVolume = evaluateVolume({
     frame: volumePropFrame,
     volume,
@@ -29003,7 +29377,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
   });
   const propsToPass = useMemo28(() => {
     return {
-      muted: muted || mediaMuted || isSequenceHidden || userPreferredVolume <= 0,
+      muted: muted || mediaMuted || userPreferredVolume <= 0,
       src: preloadedSrc,
       loop: _remotionInternalNativeLoopPassed,
       crossOrigin: crossOriginValue,
@@ -29011,7 +29385,6 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     };
   }, [
     _remotionInternalNativeLoopPassed,
-    isSequenceHidden,
     mediaMuted,
     muted,
     nativeProps,
@@ -29056,6 +29429,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     src,
     mediaType: "audio",
     playbackRate: playbackRate ?? 1,
+    preservePitch,
     onlyWarnForMediaSeekingError: false,
     acceptableTimeshift: acceptableTimeShiftInSeconds ?? null,
     isPremounting: Boolean(sequenceContext?.premounting),
@@ -29118,7 +29492,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     ...propsToPass
   });
 };
-var AudioForPreview = forwardRef6(AudioForDevelopmentForwardRefFunction);
+var AudioForPreview = forwardRef7(AudioForDevelopmentForwardRefFunction);
 var AudioForRenderingRefForwardingFunction = (props, ref) => {
   const audioRef = useRef19(null);
   const {
@@ -29137,13 +29511,14 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
     loopVolumeCurveBehavior,
     pauseWhenBuffering,
     audioStreamIndex,
+    preservePitch: _preservePitch,
     ...nativeProps
   } = props;
   const absoluteFrame = useTimelinePosition();
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const frame = useCurrentFrame();
-  const sequenceContext = useContext29(SequenceContext);
-  const { registerRenderAsset, unregisterRenderAsset } = useContext29(RenderAssetManager);
+  const sequenceContext = useContext30(SequenceContext);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext30(RenderAssetManager);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   const id = useMemo29(() => `audio-${random(props.src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}`, [
     props.src,
@@ -29250,9 +29625,9 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
     onError: onNativeError
   });
 };
-var AudioForRendering = forwardRef7(AudioForRenderingRefForwardingFunction);
+var AudioForRendering = forwardRef8(AudioForRenderingRefForwardingFunction);
 var AudioRefForwardingFunction = (props, ref) => {
-  const audioTagsContext = useContext30(SharedAudioTagsContext);
+  const audioTagsContext = useContext31(SharedAudioTagsContext);
   const {
     startFrom,
     endAt,
@@ -29271,12 +29646,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 } = useContext30(DurationsContext);
+  const { durations, setDurations } = useContext31(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 = useCallback13((e) => {
+  const onError = useCallback14((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) {
@@ -29290,7 +29665,7 @@ var AudioRefForwardingFunction = (props, ref) => {
       console.warn(errMessage);
     }
   }, [loop, onRemotionError, preloadedSrc]);
-  const onDuration = useCallback13((src, durationInSeconds) => {
+  const onDuration = useCallback14((src, durationInSeconds) => {
     setDurations({ type: "got-duration", durationInSeconds, src });
   }, [setDurations]);
   const durationFetched = durations[getAbsoluteSrc(preloadedSrc)] ?? durations[getAbsoluteSrc(props.src)];
@@ -29340,7 +29715,11 @@ var AudioRefForwardingFunction = (props, ref) => {
       })
     });
   }
-  validateMediaProps({ playbackRate: props.playbackRate, volume: props.volume }, "Html5Audio");
+  validateMediaProps({
+    playbackRate: props.playbackRate,
+    preservePitch: props.preservePitch,
+    volume: props.volume
+  }, "Html5Audio");
   if (environment.isRendering) {
     return /* @__PURE__ */ jsx24(AudioForRendering, {
       onDuration,
@@ -29363,7 +29742,7 @@ var AudioRefForwardingFunction = (props, ref) => {
     showInTimeline: showInTimeline ?? true
   });
 };
-var Html5Audio = forwardRef8(AudioRefForwardingFunction);
+var Html5Audio = forwardRef9(AudioRefForwardingFunction);
 addSequenceStackTraces(Html5Audio);
 var Audio = Html5Audio;
 var kSplineTableSize = 11;
@@ -29380,11 +29759,11 @@ var IFrameRefForwarding = ({
     retries: delayRenderRetries ?? undefined,
     timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
   }));
-  const didLoad = useCallback14((e) => {
+  const didLoad = useCallback15((e) => {
     continueRender2(handle);
     onLoad?.(e);
   }, [handle, onLoad, continueRender2]);
-  const didGetError = useCallback14((e) => {
+  const didGetError = useCallback15((e) => {
     continueRender2(handle);
     if (onError) {
       onError(e);
@@ -29400,7 +29779,7 @@ var IFrameRefForwarding = ({
     onLoad: didLoad
   });
 };
-var IFrame = forwardRef9(IFrameRefForwarding);
+var IFrame = forwardRef10(IFrameRefForwarding);
 function exponentialBackoff(errorCount) {
   return 1000 * 2 ** (errorCount - 1);
 }
@@ -29410,7 +29789,7 @@ function truncateSrcForLabel(src) {
   }
   return src;
 }
-var ImgInner = ({
+var ImgContent = ({
   onError,
   maxRetries = 2,
   src,
@@ -29419,21 +29798,13 @@ var ImgInner = ({
   delayRenderTimeoutInMilliseconds,
   onImageFrame,
   crossOrigin,
-  showInTimeline,
-  name,
-  stack,
   ref,
-  _experimentalControls: controls,
   ...props2
 }) => {
   const imageRef = useRef20(null);
   const errors = useRef20({});
   const { delayPlayback } = useBufferState();
-  const sequenceContext = useContext31(SequenceContext);
-  const [timelineId] = useState18(() => String(Math.random()));
-  if (!src) {
-    throw new Error('No "src" prop was passed to <Img>.');
-  }
+  const sequenceContext = useContext32(SequenceContext);
   const _propsValid = true;
   if (!_propsValid) {
     throw new Error("typecheck error");
@@ -29441,19 +29812,8 @@ var ImgInner = ({
   useImperativeHandle6(ref, () => {
     return imageRef.current;
   }, []);
-  useImageInTimeline({
-    src,
-    displayName: name ?? null,
-    id: timelineId,
-    stack: stack ?? null,
-    showInTimeline: showInTimeline ?? true,
-    premountDisplay: sequenceContext?.premountDisplay ?? null,
-    postmountDisplay: sequenceContext?.postmountDisplay ?? null,
-    loopDisplay: undefined,
-    controls: controls ?? null
-  });
   const actualSrc = usePreload(src);
-  const retryIn = useCallback15((timeout) => {
+  const retryIn = useCallback16((timeout) => {
     if (!imageRef.current) {
       return;
     }
@@ -29471,7 +29831,7 @@ var ImgInner = ({
     }, timeout);
   }, []);
   const { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
-  const didGetError = useCallback15((e) => {
+  const didGetError = useCallback16((e) => {
     if (!errors.current) {
       return;
     }
@@ -29573,7 +29933,44 @@ var ImgInner = ({
     decoding: "sync"
   });
 };
-var Img = wrapInSchema(ImgInner, sequenceStyleSchema);
+var ImgInner = ({
+  hidden,
+  name,
+  stack,
+  showInTimeline,
+  src,
+  _experimentalControls: controls,
+  ...props2
+}) => {
+  const sequenceContext = useContext32(SequenceContext);
+  const [timelineId] = useState18(() => String(Math.random()));
+  if (!src) {
+    throw new Error('No "src" prop was passed to <Img>.');
+  }
+  useImageInTimeline({
+    src,
+    displayName: name ?? null,
+    id: timelineId,
+    stack: stack ?? null,
+    showInTimeline: showInTimeline ?? true,
+    premountDisplay: sequenceContext?.premountDisplay ?? null,
+    postmountDisplay: sequenceContext?.postmountDisplay ?? null,
+    loopDisplay: undefined,
+    controls: controls ?? null
+  });
+  if (hidden) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx26(ImgContent, {
+    src,
+    ...props2
+  });
+};
+var imgSchema = {
+  ...sequenceStyleSchema,
+  hidden: hiddenField
+};
+var Img = wrapInSchema(ImgInner, imgSchema);
 addSequenceStackTraces(Img);
 var compositionsRef = React28.createRef();
 var CompositionManagerProvider = ({
@@ -29587,14 +29984,14 @@ var CompositionManagerProvider = ({
   const [canvasContent, setCanvasContent] = useState19(initialCanvasContent);
   const [compositions, setCompositions] = useState19(initialCompositions);
   const currentcompositionsRef = useRef21(compositions);
-  const updateCompositions = useCallback16((updateComps) => {
+  const updateCompositions = useCallback17((updateComps) => {
     setCompositions((comps) => {
       const updated = updateComps(comps);
       currentcompositionsRef.current = updated;
       return updated;
     });
   }, []);
-  const registerComposition = useCallback16((comp) => {
+  const registerComposition = useCallback17((comp) => {
     updateCompositions((comps) => {
       if (comps.find((c2) => c2.id === comp.id)) {
         throw new Error(`Multiple composition with id ${comp.id} are registered.`);
@@ -29602,12 +29999,12 @@ var CompositionManagerProvider = ({
       return [...comps, comp];
     });
   }, [updateCompositions]);
-  const unregisterComposition = useCallback16((id) => {
+  const unregisterComposition = useCallback17((id) => {
     setCompositions((comps) => {
       return comps.filter((c2) => c2.id !== id);
     });
   }, []);
-  const registerFolder = useCallback16((name, parent, nonce) => {
+  const registerFolder = useCallback17((name, parent, nonce) => {
     setFolders((prevFolders) => {
       return [
         ...prevFolders,
@@ -29619,7 +30016,7 @@ var CompositionManagerProvider = ({
       ];
     });
   }, []);
-  const unregisterFolder = useCallback16((name, parent) => {
+  const unregisterFolder = useCallback17((name, parent) => {
     setFolders((prevFolders) => {
       return prevFolders.filter((p) => !(p.name === name && p.parent === parent));
     });
@@ -29719,16 +30116,31 @@ var makeDefaultPreviewCSS = (scope, backgroundColor) => {
     }
   `;
 };
-var defineEffect = (definition) => definition;
-var createDescriptor = (definition, params) => {
-  const widened = definition;
-  return {
+var disabledEffectField = {
+  type: "boolean",
+  default: false,
+  description: "Disabled"
+};
+var createEffect = (definition) => {
+  const userCalculateKey = definition.calculateKey;
+  const widened = {
+    ...definition,
+    calculateKey: (params) => {
+      const disabled = params.disabled ?? false;
+      return `${userCalculateKey(params)}-disabled-${disabled}`;
+    },
+    schema: {
+      disabled: disabledEffectField,
+      ...definition.schema
+    }
+  };
+  const factory = (params = {}) => ({
     definition: widened,
     params,
-    stack: new Error().stack,
     effectKey: widened.calculateKey(params),
     memoized: false
-  };
+  });
+  return factory;
 };
 var REMOTION_STUDIO_CONTAINER_ELEMENT = "__remotion-studio-container";
 var getPreviewDomElement = () => {
@@ -29754,7 +30166,7 @@ var waitForRoot = (fn) => {
 };
 var MediaEnabledContext = createContext23(null);
 var useVideoEnabled = () => {
-  const context = useContext32(MediaEnabledContext);
+  const context = useContext33(MediaEnabledContext);
   if (!context) {
     return window.remotion_videoEnabled;
   }
@@ -29764,7 +30176,7 @@ var useVideoEnabled = () => {
   return context.videoEnabled;
 };
 var useAudioEnabled = () => {
-  const context = useContext32(MediaEnabledContext);
+  const context = useContext33(MediaEnabledContext);
   if (!context) {
     return window.remotion_audioEnabled;
   }
@@ -30080,15 +30492,16 @@ var OffthreadVideoForRendering = ({
   onVideoFrame,
   crossOrigin,
   audioStreamIndex,
+  preservePitch: _preservePitch,
   ...props2
 }) => {
   const absoluteFrame = useTimelinePosition();
   const frame = useCurrentFrame();
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior);
   const videoConfig = useUnsafeVideoConfig();
-  const sequenceContext = useContext33(SequenceContext);
+  const sequenceContext = useContext34(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext33(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext34(RenderAssetManager);
   if (!src) {
     throw new TypeError("No `src` was passed to <OffthreadVideo>.");
   }
@@ -30235,7 +30648,7 @@ var OffthreadVideoForRendering = ({
     continueRender2,
     delayRender2
   ]);
-  const onErr = useCallback17(() => {
+  const onErr = useCallback18(() => {
     if (onError) {
       onError?.(new Error("Failed to load image with src " + imageSrc));
     } else {
@@ -30245,7 +30658,7 @@ var OffthreadVideoForRendering = ({
   const className = useMemo33(() => {
     return [OBJECTFIT_CONTAIN_CLASS_NAME, props2.className].filter(truthy2).join(" ");
   }, [props2.className]);
-  const onImageFrame = useCallback17((img) => {
+  const onImageFrame = useCallback18((img) => {
     if (onVideoFrame) {
       onVideoFrame(img);
     }
@@ -30300,7 +30713,7 @@ class MediaPlaybackError extends Error {
   }
 }
 var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
-  const context = useContext34(SharedAudioContext);
+  const context = useContext35(SharedAudioContext);
   if (!context) {
     throw new Error("SharedAudioContext not found");
   }
@@ -30326,6 +30739,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     volume,
     muted,
     playbackRate,
+    preservePitch,
     onlyWarnForMediaSeekingError,
     src,
     onDuration,
@@ -30356,12 +30770,10 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   }
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const { fps, durationInFrames } = useVideoConfig();
-  const parentSequence = useContext34(SequenceContext);
-  const { hidden } = useContext34(SequenceVisibilityToggleContext);
+  const parentSequence = useContext35(SequenceContext);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const [timelineId] = useState21(() => String(Math.random()));
-  const isSequenceHidden = hidden[timelineId] ?? false;
   if (typeof acceptableTimeShift !== "undefined") {
     throw new Error("acceptableTimeShift has been removed. Use acceptableTimeShiftInSeconds instead.");
   }
@@ -30392,6 +30804,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     src,
     mediaType: "video",
     playbackRate: props2.playbackRate ?? 1,
+    preservePitch,
     onlyWarnForMediaSeekingError,
     acceptableTimeshift: acceptableTimeShiftInSeconds ?? null,
     isPremounting: Boolean(parentSequence?.premounting),
@@ -30505,10 +30918,9 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   }, []);
   const actualStyle = useMemo34(() => {
     return {
-      ...style,
-      opacity: isSequenceHidden ? 0 : style?.opacity ?? 1
+      ...style
     };
-  }, [isSequenceHidden, style]);
+  }, [style]);
   const crossOriginValue = getCrossOriginValue({
     crossOrigin,
     requestsVideoFrame: Boolean(onVideoFrame),
@@ -30516,7 +30928,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   });
   return /* @__PURE__ */ jsx31("video", {
     ref: videoRef,
-    muted: muted || mediaMuted || isSequenceHidden || userPreferredVolume <= 0,
+    muted: muted || mediaMuted || userPreferredVolume <= 0,
     playsInline: true,
     src: actualSrc,
     loop: _remotionInternalNativeLoopPassed,
@@ -30526,7 +30938,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     ...nativeProps
   });
 };
-var VideoForPreview = forwardRef10(VideoForDevelopmentRefForwardingFunction);
+var VideoForPreview = forwardRef11(VideoForDevelopmentRefForwardingFunction);
 var InnerOffthreadVideo = (props2) => {
   const {
     startFrom,
@@ -30543,7 +30955,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 = useCallback18(() => {
+  const onDuration = useCallback19(() => {
     return;
   }, []);
   if (typeof props2.src !== "string") {
@@ -30631,6 +31043,7 @@ var OffthreadVideo = ({
   onVideoFrame,
   pauseWhenBuffering,
   playbackRate,
+  preservePitch,
   showInTimeline,
   style,
   toneFrequency,
@@ -30666,6 +31079,7 @@ var OffthreadVideo = ({
     onVideoFrame,
     pauseWhenBuffering: pauseWhenBuffering ?? true,
     playbackRate: playbackRate ?? 1,
+    preservePitch,
     toneFrequency: toneFrequency ?? 1,
     showInTimeline: showInTimeline ?? true,
     src,
@@ -30786,7 +31200,6 @@ var Internals = {
   VisualModeSettersContext,
   SequenceManager,
   SequenceStackTracesUpdateContext,
-  SequenceVisibilityToggleContext,
   wrapInSchema,
   sequenceSchema,
   sequenceStyleSchema,
@@ -30882,13 +31295,16 @@ var Internals = {
   useEffectChainState,
   runEffectChain,
   useMemoizedEffects,
-  defineEffect,
-  createDescriptor,
+  useMemoizedEffectDefinitions,
+  createEffect,
   computeEffectiveSchemaValuesDotNotation,
   OverrideIdsToNodePathsGettersContext,
   OverrideIdsToNodePathsSettersContext,
   findPropsToDelete,
-  flattenEffects
+  makeSequencePropsSubscriptionKey,
+  getCodeValuesCtx,
+  getEffectCodeValuesCtx,
+  hiddenField
 };
 var NUMBER = "[-+]?\\d*\\.?\\d+";
 var PERCENTAGE = NUMBER + "%";
@@ -30951,7 +31367,7 @@ var SeriesSequenceRefForwardingFunction = ({ children }, _ref) => {
     children
   });
 };
-var SeriesSequence = forwardRef11(SeriesSequenceRefForwardingFunction);
+var SeriesSequence = forwardRef12(SeriesSequenceRefForwardingFunction);
 var SeriesInner = (props2) => {
   const childrenValue = useMemo36(() => {
     let startFrame = 0;
@@ -31476,6 +31892,7 @@ var VideoForRenderingForwardFunction = ({
   loopVolumeCurveBehavior,
   audioStreamIndex,
   onVideoFrame,
+  preservePitch: _preservePitch,
   ...props2
 }, ref) => {
   const absoluteFrame = useTimelinePosition();
@@ -31483,13 +31900,13 @@ var VideoForRenderingForwardFunction = ({
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const videoConfig = useUnsafeVideoConfig();
   const videoRef = useRef23(null);
-  const sequenceContext = useContext35(SequenceContext);
+  const sequenceContext = useContext36(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
   const environment = useRemotionEnvironment();
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext35(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext36(RenderAssetManager);
   const id = useMemo37(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     props2.src,
     sequenceContext?.cumulatedFrom,
@@ -31678,7 +32095,7 @@ var VideoForRenderingForwardFunction = ({
     ...props2
   });
 };
-var VideoForRendering = forwardRef12(VideoForRenderingForwardFunction);
+var VideoForRendering = forwardRef13(VideoForRenderingForwardFunction);
 var VideoForwardingFunction = (props2, ref) => {
   const {
     startFrom,
@@ -31699,7 +32116,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 } = useContext36(DurationsContext);
+  const { durations, setDurations } = useContext37(DurationsContext);
   if (typeof ref === "string") {
     throw new Error("string refs are not supported");
   }
@@ -31707,10 +32124,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 = useCallback19((src, durationInSeconds) => {
+  const onDuration = useCallback20((src, durationInSeconds) => {
     setDurations({ type: "got-duration", durationInSeconds, src });
   }, [setDurations]);
-  const onVideoFrame = useCallback19(() => {}, []);
+  const onVideoFrame = useCallback20(() => {}, []);
   const durationFetched = durations[getAbsoluteSrc(preloadedSrc)] ?? durations[getAbsoluteSrc(props2.src)];
   validateMediaTrimProps({ startFrom, endAt, trimBefore, trimAfter });
   const { trimBeforeValue, trimAfterValue } = resolveTrimProps({
@@ -31762,7 +32179,11 @@ var VideoForwardingFunction = (props2, ref) => {
       })
     });
   }
-  validateMediaProps({ playbackRate: props2.playbackRate, volume: props2.volume }, "Html5Video");
+  validateMediaProps({
+    playbackRate: props2.playbackRate,
+    preservePitch: props2.preservePitch,
+    volume: props2.volume
+  }, "Html5Video");
   if (environment.isRendering) {
     return /* @__PURE__ */ jsx37(VideoForRendering, {
       onDuration,
@@ -31784,7 +32205,7 @@ var VideoForwardingFunction = (props2, ref) => {
     onAutoPlayError: onAutoPlayError ?? undefined
   });
 };
-var Html5Video = forwardRef13(VideoForwardingFunction);
+var Html5Video = forwardRef14(VideoForwardingFunction);
 addSequenceStackTraces(Html5Video);
 checkMultipleRemotionVersions();
 var proxyObj = {};
@@ -31828,7 +32249,7 @@ import { jsx as jsx113 } from "react/jsx-runtime";
 import { jsx as jsx122 } from "react/jsx-runtime";
 import * as React362 from "react";
 import * as ReactDOM4 from "react-dom";
-import React11 from "react";
+import React112 from "react";
 import * as React8 from "react";
 import { jsx as jsx132 } from "react/jsx-runtime";
 import * as React9 from "react";
@@ -31838,7 +32259,7 @@ import { jsx as jsx152 } from "react/jsx-runtime";
 import * as React122 from "react";
 import { jsx as jsx162 } from "react/jsx-runtime";
 import * as React16 from "react";
-import * as React132 from "react";
+import * as React13 from "react";
 import * as ReactDOM from "react-dom";
 import { jsx as jsx172 } from "react/jsx-runtime";
 import * as React14 from "react";
@@ -31866,8 +32287,8 @@ import * as React282 from "react";
 import { jsx as jsx232 } from "react/jsx-runtime";
 import * as React35 from "react";
 import * as React312 from "react";
-import { useState as useState112 } from "react";
 import * as React292 from "react";
+import { useState as useState112 } from "react";
 import * as React30 from "react";
 import * as React342 from "react";
 import * as React332 from "react";
@@ -32810,13 +33231,13 @@ function createCollection(name) {
   const [CollectionProviderImpl, useCollectionContext] = createCollectionContext(PROVIDER_NAME, { collectionRef: { current: null }, itemMap: /* @__PURE__ */ new Map });
   const CollectionProvider = (props) => {
     const { scope, children } = props;
-    const ref = React11.useRef(null);
-    const itemMap = React11.useRef(/* @__PURE__ */ new Map).current;
+    const ref = React112.useRef(null);
+    const itemMap = React112.useRef(/* @__PURE__ */ new Map).current;
     return /* @__PURE__ */ jsx152(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
   };
   CollectionProvider.displayName = PROVIDER_NAME;
   const COLLECTION_SLOT_NAME = name + "CollectionSlot";
-  const CollectionSlot = React11.forwardRef((props, forwardedRef) => {
+  const CollectionSlot = React112.forwardRef((props, forwardedRef) => {
     const { scope, children } = props;
     const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
     const composedRefs = useComposedRefs2(forwardedRef, context.collectionRef);
@@ -32825,12 +33246,12 @@ function createCollection(name) {
   CollectionSlot.displayName = COLLECTION_SLOT_NAME;
   const ITEM_SLOT_NAME = name + "CollectionItemSlot";
   const ITEM_DATA_ATTR = "data-radix-collection-item";
-  const CollectionItemSlot = React11.forwardRef((props, forwardedRef) => {
+  const CollectionItemSlot = React112.forwardRef((props, forwardedRef) => {
     const { scope, children, ...itemData } = props;
-    const ref = React11.useRef(null);
+    const ref = React112.useRef(null);
     const composedRefs = useComposedRefs2(forwardedRef, ref);
     const context = useCollectionContext(ITEM_SLOT_NAME, scope);
-    React11.useEffect(() => {
+    React112.useEffect(() => {
       context.itemMap.set(ref, { ref, ...itemData });
       return () => void context.itemMap.delete(ref);
     });
@@ -32839,7 +33260,7 @@ function createCollection(name) {
   CollectionItemSlot.displayName = ITEM_SLOT_NAME;
   function useCollection(scope) {
     const context = useCollectionContext(name + "CollectionConsumer", scope);
-    const getItems = React11.useCallback(() => {
+    const getItems = React112.useCallback(() => {
       const collectionNode = context.collectionRef.current;
       if (!collectionNode)
         return [];
@@ -32880,7 +33301,7 @@ var NODES = [
   "ul"
 ];
 var Primitive = NODES.reduce((primitive, node) => {
-  const Node2 = React132.forwardRef((props, forwardedRef) => {
+  const Node2 = React13.forwardRef((props, forwardedRef) => {
     const { asChild, ...primitiveProps } = props;
     const Comp = asChild ? Slot2 : node;
     if (typeof window !== "undefined") {
@@ -35622,7 +36043,7 @@ var hideOthers = function(originalTarget, parentNode, markerName) {
   return applyAttributeToOthers(targets, activeParentNode, markerName, "aria-hidden");
 };
 var __assign = function() {
-  __assign = Object.assign || function __assign(t) {
+  __assign = Object.assign || function __assign2(t) {
     for (var s, i = 1, n = arguments.length;i < n; i++) {
       s = arguments[i];
       for (var p in s)
@@ -37409,17 +37830,17 @@ function createContextScope2(scopeName, createContextScopeDeps = []) {
   let defaultContexts = [];
   function createContext32(rootComponentName, defaultContext) {
     const BaseContext = React382.createContext(defaultContext);
-    const index2 = defaultContexts.length;
+    const index3 = defaultContexts.length;
     defaultContexts = [...defaultContexts, defaultContext];
     const Provider = (props) => {
       const { scope, children, ...context } = props;
-      const Context = scope?.[scopeName]?.[index2] || BaseContext;
+      const Context = scope?.[scopeName]?.[index3] || BaseContext;
       const value = React382.useMemo(() => context, Object.values(context));
       return /* @__PURE__ */ jsx272(Context.Provider, { value, children });
     };
     Provider.displayName = rootComponentName + "Provider";
     function useContext222(consumerName, scope) {
-      const Context = scope?.[scopeName]?.[index2] || BaseContext;
+      const Context = scope?.[scopeName]?.[index3] || BaseContext;
       const context = React382.useContext(Context);
       if (context)
         return context;
@@ -37616,10 +38037,10 @@ var OrderedDict = class _OrderedDict extends Map {
     super.set(key, value);
     return this;
   }
-  insert(index2, key, value) {
+  insert(index3, key, value) {
     const has = this.has(key);
     const length2 = this.#keys.length;
-    const relativeIndex = toSafeInteger(index2);
+    const relativeIndex = toSafeInteger(index3);
     let actualIndex = relativeIndex >= 0 ? relativeIndex : length2 + relativeIndex;
     const safeIndex = actualIndex < 0 || actualIndex >= length2 ? -1 : actualIndex;
     if (safeIndex === this.size || has && safeIndex === this.size - 1 || safeIndex === -1) {
@@ -37657,39 +38078,39 @@ var OrderedDict = class _OrderedDict extends Map {
     }
     return this;
   }
-  with(index2, key, value) {
+  with(index3, key, value) {
     const copy = new _OrderedDict(this);
-    copy.insert(index2, key, value);
+    copy.insert(index3, key, value);
     return copy;
   }
   before(key) {
-    const index2 = this.#keys.indexOf(key) - 1;
-    if (index2 < 0) {
+    const index3 = this.#keys.indexOf(key) - 1;
+    if (index3 < 0) {
       return;
     }
-    return this.entryAt(index2);
+    return this.entryAt(index3);
   }
   setBefore(key, newKey, value) {
-    const index2 = this.#keys.indexOf(key);
-    if (index2 === -1) {
+    const index3 = this.#keys.indexOf(key);
+    if (index3 === -1) {
       return this;
     }
-    return this.insert(index2, newKey, value);
+    return this.insert(index3, newKey, value);
   }
   after(key) {
-    let index2 = this.#keys.indexOf(key);
-    index2 = index2 === -1 || index2 === this.size - 1 ? -1 : index2 + 1;
-    if (index2 === -1) {
+    let index3 = this.#keys.indexOf(key);
+    index3 = index3 === -1 || index3 === this.size - 1 ? -1 : index3 + 1;
+    if (index3 === -1) {
       return;
     }
-    return this.entryAt(index2);
+    return this.entryAt(index3);
   }
   setAfter(key, newKey, value) {
-    const index2 = this.#keys.indexOf(key);
-    if (index2 === -1) {
+    const index3 = this.#keys.indexOf(key);
+    if (index3 === -1) {
       return this;
     }
-    return this.insert(index2 + 1, newKey, value);
+    return this.insert(index3 + 1, newKey, value);
   }
   first() {
     return this.entryAt(0);
@@ -37708,21 +38129,21 @@ var OrderedDict = class _OrderedDict extends Map {
     }
     return deleted;
   }
-  deleteAt(index2) {
-    const key = this.keyAt(index2);
+  deleteAt(index3) {
+    const key = this.keyAt(index3);
     if (key !== undefined) {
       return this.delete(key);
     }
     return false;
   }
-  at(index2) {
-    const key = at(this.#keys, index2);
+  at(index3) {
+    const key = at(this.#keys, index3);
     if (key !== undefined) {
       return this.get(key);
     }
   }
-  entryAt(index2) {
-    const key = at(this.#keys, index2);
+  entryAt(index3) {
+    const key = at(this.#keys, index3);
     if (key !== undefined) {
       return [key, this.get(key)];
     }
@@ -37730,15 +38151,15 @@ var OrderedDict = class _OrderedDict extends Map {
   indexOf(key) {
     return this.#keys.indexOf(key);
   }
-  keyAt(index2) {
-    return at(this.#keys, index2);
+  keyAt(index3) {
+    return at(this.#keys, index3);
   }
   from(key, offset4) {
-    const index2 = this.indexOf(key);
-    if (index2 === -1) {
+    const index3 = this.indexOf(key);
+    if (index3 === -1) {
       return;
     }
-    let dest = index2 + offset4;
+    let dest = index3 + offset4;
     if (dest < 0)
       dest = 0;
     if (dest >= this.size)
@@ -37746,11 +38167,11 @@ var OrderedDict = class _OrderedDict extends Map {
     return this.at(dest);
   }
   keyFrom(key, offset4) {
-    const index2 = this.indexOf(key);
-    if (index2 === -1) {
+    const index3 = this.indexOf(key);
+    if (index3 === -1) {
       return;
     }
-    let dest = index2 + offset4;
+    let dest = index3 + offset4;
     if (dest < 0)
       dest = 0;
     if (dest >= this.size)
@@ -37758,68 +38179,68 @@ var OrderedDict = class _OrderedDict extends Map {
     return this.keyAt(dest);
   }
   find(predicate, thisArg) {
-    let index2 = 0;
+    let index3 = 0;
     for (const entry of this) {
-      if (Reflect.apply(predicate, thisArg, [entry, index2, this])) {
+      if (Reflect.apply(predicate, thisArg, [entry, index3, this])) {
         return entry;
       }
-      index2++;
+      index3++;
     }
     return;
   }
   findIndex(predicate, thisArg) {
-    let index2 = 0;
+    let index3 = 0;
     for (const entry of this) {
-      if (Reflect.apply(predicate, thisArg, [entry, index2, this])) {
-        return index2;
+      if (Reflect.apply(predicate, thisArg, [entry, index3, this])) {
+        return index3;
       }
-      index2++;
+      index3++;
     }
     return -1;
   }
   filter(predicate, thisArg) {
     const entries = [];
-    let index2 = 0;
+    let index3 = 0;
     for (const entry of this) {
-      if (Reflect.apply(predicate, thisArg, [entry, index2, this])) {
+      if (Reflect.apply(predicate, thisArg, [entry, index3, this])) {
         entries.push(entry);
       }
-      index2++;
+      index3++;
     }
     return new _OrderedDict(entries);
   }
   map(callbackfn, thisArg) {
     const entries = [];
-    let index2 = 0;
+    let index3 = 0;
     for (const entry of this) {
-      entries.push([entry[0], Reflect.apply(callbackfn, thisArg, [entry, index2, this])]);
-      index2++;
+      entries.push([entry[0], Reflect.apply(callbackfn, thisArg, [entry, index3, this])]);
+      index3++;
     }
     return new _OrderedDict(entries);
   }
   reduce(...args) {
     const [callbackfn, initialValue] = args;
-    let index2 = 0;
+    let index3 = 0;
     let accumulator = initialValue ?? this.at(0);
     for (const entry of this) {
-      if (index2 === 0 && args.length === 1) {
+      if (index3 === 0 && args.length === 1) {
         accumulator = entry;
       } else {
-        accumulator = Reflect.apply(callbackfn, this, [accumulator, entry, index2, this]);
+        accumulator = Reflect.apply(callbackfn, this, [accumulator, entry, index3, this]);
       }
-      index2++;
+      index3++;
     }
     return accumulator;
   }
   reduceRight(...args) {
     const [callbackfn, initialValue] = args;
     let accumulator = initialValue ?? this.at(-1);
-    for (let index2 = this.size - 1;index2 >= 0; index2--) {
-      const entry = this.at(index2);
-      if (index2 === this.size - 1 && args.length === 1) {
+    for (let index3 = this.size - 1;index3 >= 0; index3--) {
+      const entry = this.at(index3);
+      if (index3 === this.size - 1 && args.length === 1) {
         accumulator = entry;
       } else {
-        accumulator = Reflect.apply(callbackfn, this, [accumulator, entry, index2, this]);
+        accumulator = Reflect.apply(callbackfn, this, [accumulator, entry, index3, this]);
       }
     }
     return accumulator;
@@ -37830,8 +38251,8 @@ var OrderedDict = class _OrderedDict extends Map {
   }
   toReversed() {
     const reversed = new _OrderedDict;
-    for (let index2 = this.size - 1;index2 >= 0; index2--) {
-      const key = this.keyAt(index2);
+    for (let index3 = this.size - 1;index3 >= 0; index3--) {
+      const key = this.keyAt(index3);
       const element = this.get(key);
       reversed.set(key, element);
     }
@@ -37854,44 +38275,44 @@ var OrderedDict = class _OrderedDict extends Map {
     if (end !== undefined && end > 0) {
       stop = end - 1;
     }
-    for (let index2 = start;index2 <= stop; index2++) {
-      const key = this.keyAt(index2);
+    for (let index3 = start;index3 <= stop; index3++) {
+      const key = this.keyAt(index3);
       const element = this.get(key);
       result.set(key, element);
     }
     return result;
   }
   every(predicate, thisArg) {
-    let index2 = 0;
+    let index3 = 0;
     for (const entry of this) {
-      if (!Reflect.apply(predicate, thisArg, [entry, index2, this])) {
+      if (!Reflect.apply(predicate, thisArg, [entry, index3, this])) {
         return false;
       }
-      index2++;
+      index3++;
     }
     return true;
   }
   some(predicate, thisArg) {
-    let index2 = 0;
+    let index3 = 0;
     for (const entry of this) {
-      if (Reflect.apply(predicate, thisArg, [entry, index2, this])) {
+      if (Reflect.apply(predicate, thisArg, [entry, index3, this])) {
         return true;
       }
-      index2++;
+      index3++;
     }
     return false;
   }
 };
-function at(array, index2) {
+function at(array, index3) {
   if ("at" in Array.prototype) {
-    return Array.prototype.at.call(array, index2);
+    return Array.prototype.at.call(array, index3);
   }
-  const actualIndex = toSafeIndex(array, index2);
+  const actualIndex = toSafeIndex(array, index3);
   return actualIndex === -1 ? undefined : array[actualIndex];
 }
-function toSafeIndex(array, index2) {
+function toSafeIndex(array, index3) {
   const length2 = array.length;
-  const relativeIndex = toSafeInteger(index2);
+  const relativeIndex = toSafeInteger(index3);
   const actualIndex = relativeIndex >= 0 ? relativeIndex : length2 + relativeIndex;
   return actualIndex < 0 || actualIndex >= length2 ? -1 : actualIndex;
 }
@@ -37943,7 +38364,7 @@ var Primitive2 = NODES2.reduce((primitive, node) => {
   Node2.displayName = `Primitive.${node}`;
   return { ...primitive, [node]: Node2 };
 }, {});
-function useCallbackRef3(callback) {
+function useCallbackRef4(callback) {
   const callbackRef = React44.useRef(callback);
   React44.useEffect(() => {
     callbackRef.current = callback;
@@ -38047,7 +38468,7 @@ var RovingFocusGroupImpl = React47.forwardRef((props, forwardedRef) => {
     caller: GROUP_NAME2
   });
   const [isTabbingBackOut, setIsTabbingBackOut] = React47.useState(false);
-  const handleEntryFocus = useCallbackRef3(onEntryFocus);
+  const handleEntryFocus = useCallbackRef4(onEntryFocus);
   const getItems = useCollection2(__scopeRovingFocusGroup);
   const isClickFocusRef = React47.useRef(false);
   const [focusableItemsCount, setFocusableItemsCount] = React47.useState(0);
@@ -38200,7 +38621,7 @@ function focusFirst2(candidates, preventScroll = false) {
   }
 }
 function wrapArray2(array, startIndex) {
-  return array.map((_, index2) => array[(startIndex + index2) % array.length]);
+  return array.map((_, index3) => array[(startIndex + index3) % array.length]);
 }
 var Root3 = RovingFocusGroup;
 var Item2 = RovingFocusGroupItem;
@@ -38515,7 +38936,7 @@ var Triangle2 = (props) => {
 };
 
 // src/components/prompts/PromptsSubmit.tsx
-import { useCallback as useCallback35, useEffect as useEffect47, useRef as useRef45, useState as useState47 } from "react";
+import { useCallback as useCallback34, useEffect as useEffect47, useRef as useRef45, useState as useState47 } from "react";
 
 // src/components/prompts/config.ts
 var REMOTION_PRO_ORIGIN = "https://www.remotion.pro";
@@ -38543,80 +38964,80 @@ function useMediaContext2() {
 var AirPlayButtonBridge = createReactComponent(AirPlayButtonInstance, {
   domEventsRegex: /^onMedia/
 });
-var AirPlayButton2 = React56.forwardRef(({ children, ...props }, forwardRef15) => {
+var AirPlayButton2 = React56.forwardRef(({ children, ...props }, forwardRef16) => {
   return /* @__PURE__ */ React56.createElement(AirPlayButtonBridge, { ...props }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.button, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef15)
+    ref: composeRefs3(props2.ref, forwardRef16)
   }, children));
 });
 AirPlayButton2.displayName = "AirPlayButton";
 var PlayButtonBridge = createReactComponent(PlayButtonInstance, {
   domEventsRegex: /^onMedia/
 });
-var PlayButton2 = React56.forwardRef(({ children, ...props }, forwardRef15) => {
+var PlayButton2 = React56.forwardRef(({ children, ...props }, forwardRef16) => {
   return /* @__PURE__ */ React56.createElement(PlayButtonBridge, { ...props }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.button, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef15)
+    ref: composeRefs3(props2.ref, forwardRef16)
   }, children));
 });
 PlayButton2.displayName = "PlayButton";
 var CaptionButtonBridge = createReactComponent(CaptionButtonInstance, {
   domEventsRegex: /^onMedia/
 });
-var CaptionButton2 = React56.forwardRef(({ children, ...props }, forwardRef15) => {
+var CaptionButton2 = React56.forwardRef(({ children, ...props }, forwardRef16) => {
   return /* @__PURE__ */ React56.createElement(CaptionButtonBridge, { ...props }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.button, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef15)
+    ref: composeRefs3(props2.ref, forwardRef16)
   }, children));
 });
 CaptionButton2.displayName = "CaptionButton";
 var FullscreenButtonBridge = createReactComponent(FullscreenButtonInstance, {
   domEventsRegex: /^onMedia/
 });
-var FullscreenButton2 = React56.forwardRef(({ children, ...props }, forwardRef15) => {
+var FullscreenButton2 = React56.forwardRef(({ children, ...props }, forwardRef16) => {
   return /* @__PURE__ */ React56.createElement(FullscreenButtonBridge, { ...props }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.button, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef15)
+    ref: composeRefs3(props2.ref, forwardRef16)
   }, children));
 });
 FullscreenButton2.displayName = "FullscreenButton";
 var MuteButtonBridge = createReactComponent(MuteButtonInstance, {
   domEventsRegex: /^onMedia/
 });
-var MuteButton2 = React56.forwardRef(({ children, ...props }, forwardRef15) => {
+var MuteButton2 = React56.forwardRef(({ children, ...props }, forwardRef16) => {
   return /* @__PURE__ */ React56.createElement(MuteButtonBridge, { ...props }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.button, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef15)
+    ref: composeRefs3(props2.ref, forwardRef16)
   }, children));
 });
 MuteButton2.displayName = "MuteButton";
 var PIPButtonBridge = createReactComponent(PIPButtonInstance, {
   domEventsRegex: /^onMedia/
 });
-var PIPButton2 = React56.forwardRef(({ children, ...props }, forwardRef15) => {
+var PIPButton2 = React56.forwardRef(({ children, ...props }, forwardRef16) => {
   return /* @__PURE__ */ React56.createElement(PIPButtonBridge, { ...props }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.button, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef15)
+    ref: composeRefs3(props2.ref, forwardRef16)
   }, children));
 });
 PIPButton2.displayName = "PIPButton";
 var SeekButtonBridge = createReactComponent(SeekButtonInstance, {
   domEventsRegex: /^onMedia/
 });
-var SeekButton2 = React56.forwardRef(({ children, ...props }, forwardRef15) => {
+var SeekButton2 = React56.forwardRef(({ children, ...props }, forwardRef16) => {
   return /* @__PURE__ */ React56.createElement(SeekButtonBridge, { ...props }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.button, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef15)
+    ref: composeRefs3(props2.ref, forwardRef16)
   }, children));
 });
 SeekButton2.displayName = "SeekButton";
 var LiveButtonBridge = createReactComponent(LiveButtonInstance, {
   domEventsRegex: /^onMedia/
 });
-var LiveButton2 = React56.forwardRef(({ children, ...props }, forwardRef15) => {
+var LiveButton2 = React56.forwardRef(({ children, ...props }, forwardRef16) => {
   return /* @__PURE__ */ React56.createElement(LiveButtonBridge, { ...props }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.button, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef15)
+    ref: composeRefs3(props2.ref, forwardRef16)
   }, children));
 });
 LiveButton2.displayName = "LiveButton";
@@ -38631,42 +39052,42 @@ var SliderValueBridge = createReactComponent(SliderValueInstance);
 var SliderBridge = createReactComponent(SliderInstance, {
   events: sliderCallbacks
 });
-var Root$5 = React56.forwardRef(({ children, ...props }, forwardRef15) => {
-  return /* @__PURE__ */ React56.createElement(SliderBridge, { ...props, ref: forwardRef15 }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props2 }, children));
+var Root$5 = React56.forwardRef(({ children, ...props }, forwardRef16) => {
+  return /* @__PURE__ */ React56.createElement(SliderBridge, { ...props, ref: forwardRef16 }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props2 }, children));
 });
 Root$5.displayName = "Slider";
-var Thumb = React56.forwardRef((props, forwardRef15) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props, ref: forwardRef15 }));
+var Thumb = React56.forwardRef((props, forwardRef16) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props, ref: forwardRef16 }));
 Thumb.displayName = "SliderThumb";
-var Track = React56.forwardRef((props, forwardRef15) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props, ref: forwardRef15 }));
+var Track = React56.forwardRef((props, forwardRef16) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props, ref: forwardRef16 }));
 Track.displayName = "SliderTrack";
-var TrackFill = React56.forwardRef((props, forwardRef15) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props, ref: forwardRef15 }));
+var TrackFill = React56.forwardRef((props, forwardRef16) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props, ref: forwardRef16 }));
 TrackFill.displayName = "SliderTrackFill";
 var PreviewBridge = createReactComponent(SliderPreviewInstance);
-var Preview = React56.forwardRef(({ children, ...props }, forwardRef15) => {
+var Preview = React56.forwardRef(({ children, ...props }, forwardRef16) => {
   return /* @__PURE__ */ React56.createElement(PreviewBridge, { ...props }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.div, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef15)
+    ref: composeRefs3(props2.ref, forwardRef16)
   }, children));
 });
 Preview.displayName = "SliderPreview";
-var Value2 = React56.forwardRef(({ children, ...props }, forwardRef15) => {
+var Value2 = React56.forwardRef(({ children, ...props }, forwardRef16) => {
   return /* @__PURE__ */ React56.createElement(SliderValueBridge, { ...props }, (props2, instance) => {
     const $text = useSignal(() => instance.getValueText(), instance);
-    return /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props2, ref: forwardRef15 }, $text, children);
+    return /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props2, ref: forwardRef16 }, $text, children);
   });
 });
 Value2.displayName = "SliderValue";
-var Steps = React56.forwardRef(({ children, ...props }, forwardRef15) => {
+var Steps = React56.forwardRef(({ children, ...props }, forwardRef16) => {
   const $min = useSliderState("min"), $max = useSliderState("max"), $step = useSliderState("step"), steps = ($max - $min) / $step;
-  return /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props, ref: forwardRef15 }, Array.from({ length: Math.floor(steps) + 1 }).map((_, step) => children(step)));
+  return /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props, ref: forwardRef16 }, 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 }, forwardRef15) => {
-  return /* @__PURE__ */ React56.createElement(VolumeSliderBridge, { ...props, ref: forwardRef15 }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props2 }, children));
+var Root$4 = React56.forwardRef(({ children, ...props }, forwardRef16) => {
+  return /* @__PURE__ */ React56.createElement(VolumeSliderBridge, { ...props, ref: forwardRef16 }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props2 }, children));
 });
 Root$4.displayName = "VolumeSlider";
 function createVTTCue(startTime = 0, endTime = 0, text = "") {
@@ -38690,20 +39111,20 @@ function appendParamsToURL2(baseUrl, params) {
   return url.toString();
 }
 var ThumbnailBridge = createReactComponent(ThumbnailInstance);
-var Root$3 = React56.forwardRef(({ children, ...props }, forwardRef15) => {
+var Root$3 = React56.forwardRef(({ children, ...props }, forwardRef16) => {
   return /* @__PURE__ */ React56.createElement(ThumbnailBridge, { ...props }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.div, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef15)
+    ref: composeRefs3(props2.ref, forwardRef16)
   }, children));
 });
 Root$3.displayName = "Thumbnail";
-var Img2 = React56.forwardRef(({ children, ...props }, forwardRef15) => {
+var Img2 = React56.forwardRef(({ children, ...props }, forwardRef16) => {
   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, forwardRef15)
+    ref: composeRefs3(img.set, forwardRef16)
   }, children);
 });
 Img2.displayName = "ThumbnailImg";
@@ -38715,16 +39136,16 @@ var TimeSliderBridge = createReactComponent(TimeSliderInstance, {
   events: sliderCallbacks,
   domEventsRegex: /^onMedia/
 });
-var Root$2 = React56.forwardRef(({ children, ...props }, forwardRef15) => {
+var Root$2 = React56.forwardRef(({ children, ...props }, forwardRef16) => {
   const $chapters = React56.useMemo(() => signal(null), []);
-  return /* @__PURE__ */ React56.createElement(TimeSliderContext.Provider, { value: { $chapters } }, /* @__PURE__ */ React56.createElement(TimeSliderBridge, { ...props, ref: forwardRef15 }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props2 }, children)));
+  return /* @__PURE__ */ React56.createElement(TimeSliderContext.Provider, { value: { $chapters } }, /* @__PURE__ */ React56.createElement(TimeSliderBridge, { ...props, ref: forwardRef16 }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props2 }, children)));
 });
 Root$2.displayName = "TimeSlider";
 var SliderChaptersBridge = createReactComponent(SliderChaptersInstance);
-var Chapters = React56.forwardRef(({ children, ...props }, forwardRef15) => {
+var Chapters = React56.forwardRef(({ children, ...props }, forwardRef16) => {
   return /* @__PURE__ */ React56.createElement(SliderChaptersBridge, { ...props }, (props2, instance) => /* @__PURE__ */ React56.createElement(Primitive3.div, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef15)
+    ref: composeRefs3(props2.ref, forwardRef16)
   }, /* @__PURE__ */ React56.createElement(ChapterTracks, { instance }, children)));
 });
 Chapters.displayName = "SliderChapters";
@@ -38749,7 +39170,7 @@ function ChapterTracks({ instance, children }) {
   });
 }
 ChapterTracks.displayName = "SliderChapterTracks";
-var ChapterTitle = React56.forwardRef(({ children, ...props }, forwardRef15) => {
+var ChapterTitle = React56.forwardRef(({ children, ...props }, forwardRef16) => {
   const { $chapters } = React56.useContext(TimeSliderContext), [title, setTitle] = React56.useState();
   React56.useEffect(() => {
     return effect(() => {
@@ -38757,14 +39178,14 @@ var ChapterTitle = React56.forwardRef(({ children, ...props }, forwardRef15) =>
       setTitle(cue?.text || "");
     });
   }, []);
-  return /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props, ref: forwardRef15 }, title, children);
+  return /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props, ref: forwardRef16 }, title, children);
 });
 ChapterTitle.displayName = "SliderChapterTitle";
-var Progress = React56.forwardRef((props, forwardRef15) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props, ref: forwardRef15 }));
+var Progress = React56.forwardRef((props, forwardRef16) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props, ref: forwardRef16 }));
 Progress.displayName = "SliderProgress";
 var SliderThumbnailBridge = createReactComponent(SliderThumbnailInstance);
-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));
+var ThumbnailRoot = React56.forwardRef(({ children, ...props }, forwardRef16) => {
+  return /* @__PURE__ */ React56.createElement(SliderThumbnailBridge, { ...props }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props2, ref: composeRefs3(props2.ref, forwardRef16) }, children));
 });
 ThumbnailRoot.displayName = "SliderThumbnail";
 var Thumbnail2 = {
@@ -38774,15 +39195,15 @@ var Thumbnail2 = {
 var VideoBridge = createReactComponent(SliderVideoInstance, {
   events: ["onCanPlay", "onError"]
 });
-var Video = React56.forwardRef(({ children, ...props }, forwardRef15) => {
+var Video = React56.forwardRef(({ children, ...props }, forwardRef16) => {
   return /* @__PURE__ */ React56.createElement(VideoBridge, { ...props }, (props2, instance) => /* @__PURE__ */ React56.createElement(VideoProvider2, {
     ...props2,
     instance,
-    ref: composeRefs3(props2.ref, forwardRef15)
+    ref: composeRefs3(props2.ref, forwardRef16)
   }, children));
 });
 Video.displayName = "SliderVideo";
-var VideoProvider2 = React56.forwardRef(({ instance, children, ...props }, forwardRef15) => {
+var VideoProvider2 = React56.forwardRef(({ instance, children, ...props }, forwardRef16) => {
   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" },
@@ -38792,24 +39213,24 @@ var VideoProvider2 = React56.forwardRef(({ instance, children, ...props }, forwa
     playsInline: true,
     preload: $canLoad ? "auto" : "none",
     crossOrigin: $crossOrigin || undefined,
-    ref: composeRefs3(video.set, forwardRef15)
+    ref: composeRefs3(video.set, forwardRef16)
   }, children);
 });
 VideoProvider2.displayName = "SliderVideoProvider";
 var RadioGroupBridge = createReactComponent(RadioGroupInstance, {
   events: ["onChange"]
 });
-var Root$1 = React56.forwardRef(({ children, ...props }, forwardRef15) => {
-  return /* @__PURE__ */ React56.createElement(RadioGroupBridge, { ...props, ref: forwardRef15 }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props2 }, children));
+var Root$1 = React56.forwardRef(({ children, ...props }, forwardRef16) => {
+  return /* @__PURE__ */ React56.createElement(RadioGroupBridge, { ...props, ref: forwardRef16 }, (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 }, forwardRef15) => {
+var Item$1 = React56.forwardRef(({ children, ...props }, forwardRef16) => {
   return /* @__PURE__ */ React56.createElement(ItemBridge$1, { ...props }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.div, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef15)
+    ref: composeRefs3(props2.ref, forwardRef16)
   }, children));
 });
 Item$1.displayName = "RadioItem";
@@ -38817,8 +39238,8 @@ var MenuBridge = createReactComponent(MenuInstance, {
   events: ["onOpen", "onClose"],
   domEventsRegex: /^onMedia/
 });
-var Root4 = React56.forwardRef(({ children, ...props }, forwardRef15) => {
-  return /* @__PURE__ */ React56.createElement(MenuBridge, { ...props, ref: forwardRef15 }, (props2, instance) => /* @__PURE__ */ React56.createElement(Primitive3.div, {
+var Root4 = React56.forwardRef(({ children, ...props }, forwardRef16) => {
+  return /* @__PURE__ */ React56.createElement(MenuBridge, { ...props, ref: forwardRef16 }, (props2, instance) => /* @__PURE__ */ React56.createElement(Primitive3.div, {
     ...props2,
     style: { display: !instance.isSubmenu ? "contents" : undefined, ...props2.style }
   }, children));
@@ -38827,14 +39248,14 @@ Root4.displayName = "Menu";
 var ButtonBridge = createReactComponent(MenuButtonInstance, {
   events: ["onSelect"]
 });
-var Button2 = React56.forwardRef(({ children, ...props }, forwardRef15) => {
+var Button2 = React56.forwardRef(({ children, ...props }, forwardRef16) => {
   return /* @__PURE__ */ React56.createElement(ButtonBridge, { ...props }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.button, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef15)
+    ref: composeRefs3(props2.ref, forwardRef16)
   }, children));
 });
 Button2.displayName = "MenuButton";
-var Portal3 = React56.forwardRef(({ container: container3 = null, disabled = false, children, ...props }, forwardRef15) => {
+var Portal3 = React56.forwardRef(({ container: container3 = null, disabled = false, children, ...props }, forwardRef16) => {
   let fullscreen = useMediaState("fullscreen"), shouldPortal = disabled === "fullscreen" ? !fullscreen : !disabled;
   const target = React56.useMemo(() => {
     if (IS_SERVER3)
@@ -38845,45 +39266,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: forwardRef15
+    ref: forwardRef16
   }, children), target);
 });
 Portal3.displayName = "MenuPortal";
 var ItemsBridge = createReactComponent(MenuItemsInstance);
-var Items = React56.forwardRef(({ children, ...props }, forwardRef15) => {
+var Items = React56.forwardRef(({ children, ...props }, forwardRef16) => {
   return /* @__PURE__ */ React56.createElement(ItemsBridge, { ...props }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.div, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef15)
+    ref: composeRefs3(props2.ref, forwardRef16)
   }, children));
 });
 Items.displayName = "MenuItems";
 var ItemBridge = createReactComponent(MenuItemInstance);
-var Item3 = React56.forwardRef(({ children, ...props }, forwardRef15) => {
+var Item3 = React56.forwardRef(({ children, ...props }, forwardRef16) => {
   return /* @__PURE__ */ React56.createElement(ItemBridge, { ...props }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.div, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef15)
+    ref: composeRefs3(props2.ref, forwardRef16)
   }, children));
 });
 Item3.displayName = "MenuItem";
 var GestureBridge = createReactComponent(GestureInstance, {
   events: ["onWillTrigger", "onTrigger"]
 });
-var Gesture2 = React56.forwardRef(({ children, ...props }, forwardRef15) => {
-  return /* @__PURE__ */ React56.createElement(GestureBridge, { ...props, ref: forwardRef15 }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props2 }, children));
+var Gesture2 = React56.forwardRef(({ children, ...props }, forwardRef16) => {
+  return /* @__PURE__ */ React56.createElement(GestureBridge, { ...props, ref: forwardRef16 }, (props2) => /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props2 }, children));
 });
 Gesture2.displayName = "Gesture";
 var TimeBridge = createReactComponent(TimeInstance);
-var Time2 = React56.forwardRef(({ children, ...props }, forwardRef15) => {
+var Time2 = React56.forwardRef(({ children, ...props }, forwardRef16) => {
   return /* @__PURE__ */ React56.createElement(TimeBridge, { ...props }, (props2, instance) => /* @__PURE__ */ React56.createElement(TimeText, {
     ...props2,
     instance,
-    ref: composeRefs3(props2.ref, forwardRef15)
+    ref: composeRefs3(props2.ref, forwardRef16)
   }, children));
 });
 Time2.displayName = "Time";
-var TimeText = React56.forwardRef(({ instance, children, ...props }, forwardRef15) => {
+var TimeText = React56.forwardRef(({ instance, children, ...props }, forwardRef16) => {
   const { timeText } = instance.$state, $timeText = useSignal(timeText);
-  return /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props, ref: forwardRef15 }, $timeText, children);
+  return /* @__PURE__ */ React56.createElement(Primitive3.div, { ...props, ref: forwardRef16 }, $timeText, children);
 });
 TimeText.displayName = "TimeText";
 function useMediaPlayer() {
@@ -38987,27 +39408,27 @@ function getTrackValue(track) {
 var MediaAnnouncerBridge = createReactComponent(MediaAnnouncerInstance, {
   events: ["onChange"]
 });
-var MediaAnnouncer2 = React57.forwardRef(({ style, children, ...props }, forwardRef15) => {
+var MediaAnnouncer2 = React57.forwardRef(({ style, children, ...props }, forwardRef16) => {
   return /* @__PURE__ */ React57.createElement(MediaAnnouncerBridge, { ...props }, (props2) => /* @__PURE__ */ React57.createElement(Primitive3.div, {
     ...props2,
     style: { display: "contents", ...style },
-    ref: composeRefs3(props2.ref, forwardRef15)
+    ref: composeRefs3(props2.ref, forwardRef16)
   }, children));
 });
 MediaAnnouncer2.displayName = "MediaAnnouncer";
 var ControlsBridge = createReactComponent(ControlsInstance);
-var Root$52 = React57.forwardRef(({ children, ...props }, forwardRef15) => {
+var Root$52 = React57.forwardRef(({ children, ...props }, forwardRef16) => {
   return /* @__PURE__ */ React57.createElement(ControlsBridge, { ...props }, (props2) => /* @__PURE__ */ React57.createElement(Primitive3.div, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef15)
+    ref: composeRefs3(props2.ref, forwardRef16)
   }, children));
 });
 Root$52.displayName = "Controls";
 var ControlsGroupBridge = createReactComponent(ControlsGroupInstance);
-var Group = React57.forwardRef(({ children, ...props }, forwardRef15) => {
+var Group = React57.forwardRef(({ children, ...props }, forwardRef16) => {
   return /* @__PURE__ */ React57.createElement(ControlsGroupBridge, { ...props }, (props2) => /* @__PURE__ */ React57.createElement(Primitive3.div, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef15)
+    ref: composeRefs3(props2.ref, forwardRef16)
   }, children));
 });
 Group.displayName = "ControlsGroup";
@@ -39017,28 +39438,28 @@ function Root$42({ children, ...props }) {
 }
 Root$42.displayName = "Tooltip";
 var TriggerBridge = createReactComponent(TooltipTriggerInstance);
-var Trigger3 = React57.forwardRef(({ children, ...props }, forwardRef15) => {
+var Trigger3 = React57.forwardRef(({ children, ...props }, forwardRef16) => {
   return /* @__PURE__ */ React57.createElement(TriggerBridge, { ...props }, (props2) => /* @__PURE__ */ React57.createElement(Primitive3.button, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef15)
+    ref: composeRefs3(props2.ref, forwardRef16)
   }, children));
 });
 Trigger3.displayName = "TooltipTrigger";
 var ContentBridge = createReactComponent(TooltipContentInstance);
-var Content4 = React57.forwardRef(({ children, ...props }, forwardRef15) => {
+var Content4 = React57.forwardRef(({ children, ...props }, forwardRef16) => {
   return /* @__PURE__ */ React57.createElement(ContentBridge, { ...props }, (props2) => /* @__PURE__ */ React57.createElement(Primitive3.div, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef15)
+    ref: composeRefs3(props2.ref, forwardRef16)
   }, children));
 });
 Content4.displayName = "TooltipContent";
 var GoogleCastButtonBridge = createReactComponent(GoogleCastButtonInstance, {
   domEventsRegex: /^onMedia/
 });
-var GoogleCastButton2 = React57.forwardRef(({ children, ...props }, forwardRef15) => {
+var GoogleCastButton2 = React57.forwardRef(({ children, ...props }, forwardRef16) => {
   return /* @__PURE__ */ React57.createElement(GoogleCastButtonBridge, { ...props }, (props2) => /* @__PURE__ */ React57.createElement(Primitive3.button, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef15)
+    ref: composeRefs3(props2.ref, forwardRef16)
   }, children));
 });
 GoogleCastButton2.displayName = "GoogleCastButton";
@@ -39046,29 +39467,29 @@ var QualitySliderBridge = createReactComponent(QualitySliderInstance, {
   events: sliderCallbacks,
   domEventsRegex: /^onMedia/
 });
-var Root$32 = React57.forwardRef(({ children, ...props }, forwardRef15) => {
-  return /* @__PURE__ */ React57.createElement(QualitySliderBridge, { ...props, ref: forwardRef15 }, (props2) => /* @__PURE__ */ React57.createElement(Primitive3.div, { ...props2 }, children));
+var Root$32 = React57.forwardRef(({ children, ...props }, forwardRef16) => {
+  return /* @__PURE__ */ React57.createElement(QualitySliderBridge, { ...props, ref: forwardRef16 }, (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 }, forwardRef15) => {
-  return /* @__PURE__ */ React57.createElement(AudioGainSliderBridge, { ...props, ref: forwardRef15 }, (props2) => /* @__PURE__ */ React57.createElement(Primitive3.div, { ...props2 }, children));
+var Root$22 = React57.forwardRef(({ children, ...props }, forwardRef16) => {
+  return /* @__PURE__ */ React57.createElement(AudioGainSliderBridge, { ...props, ref: forwardRef16 }, (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 }, forwardRef15) => {
-  return /* @__PURE__ */ React57.createElement(SpeedSliderBridge, { ...props, ref: forwardRef15 }, (props2) => /* @__PURE__ */ React57.createElement(Primitive3.div, { ...props2 }, children));
+var Root$12 = React57.forwardRef(({ children, ...props }, forwardRef16) => {
+  return /* @__PURE__ */ React57.createElement(SpeedSliderBridge, { ...props, ref: forwardRef16 }, (props2) => /* @__PURE__ */ React57.createElement(Primitive3.div, { ...props2 }, children));
 });
 Root$12.displayName = "SpeedSlider";
-var Title = React57.forwardRef(({ children, ...props }, forwardRef15) => {
+var Title = React57.forwardRef(({ children, ...props }, forwardRef16) => {
   const $title = useMediaState("title");
-  return /* @__PURE__ */ React57.createElement(Primitive3.span, { ...props, ref: forwardRef15 }, $title, children);
+  return /* @__PURE__ */ React57.createElement(Primitive3.span, { ...props, ref: forwardRef16 }, $title, children);
 });
 Title.displayName = "Title";
 function useActiveTextCues(track) {
@@ -39098,17 +39519,17 @@ function useChapterTitle() {
   const $track = useActiveTextTrack("chapters"), $cues = useActiveTextCues($track);
   return $cues[0]?.text || "";
 }
-var ChapterTitle2 = React57.forwardRef(({ defaultText = "", children, ...props }, forwardRef15) => {
+var ChapterTitle2 = React57.forwardRef(({ defaultText = "", children, ...props }, forwardRef16) => {
   const $chapterTitle = useChapterTitle();
-  return /* @__PURE__ */ React57.createElement(Primitive3.span, { ...props, ref: forwardRef15 }, $chapterTitle || defaultText, children);
+  return /* @__PURE__ */ React57.createElement(Primitive3.span, { ...props, ref: forwardRef16 }, $chapterTitle || defaultText, children);
 });
 ChapterTitle2.displayName = "ChapterTitle";
 var CaptionsBridge = createReactComponent(CaptionsInstance);
-var Captions2 = React57.forwardRef(({ children, ...props }, forwardRef15) => {
-  return /* @__PURE__ */ React57.createElement(CaptionsBridge, { ...props, ref: forwardRef15 }, (props2) => /* @__PURE__ */ React57.createElement(Primitive3.div, { ...props2 }, children));
+var Captions2 = React57.forwardRef(({ children, ...props }, forwardRef16) => {
+  return /* @__PURE__ */ React57.createElement(CaptionsBridge, { ...props, ref: forwardRef16 }, (props2) => /* @__PURE__ */ React57.createElement(Primitive3.div, { ...props2 }, children));
 });
 Captions2.displayName = "Captions";
-var Root6 = React57.forwardRef(({ size: size5 = 96, children, ...props }, forwardRef15) => {
+var Root6 = React57.forwardRef(({ size: size5 = 96, children, ...props }, forwardRef16) => {
   return /* @__PURE__ */ React57.createElement("svg", {
     width: size5,
     height: size5,
@@ -39117,7 +39538,7 @@ var Root6 = React57.forwardRef(({ size: size5 = 96, children, ...props }, forwar
     "aria-hidden": "true",
     "data-part": "root",
     ...props,
-    ref: forwardRef15
+    ref: forwardRef16
   }, children);
 });
 var Track2 = React57.forwardRef(({ width = 8, children, ...props }, ref) => /* @__PURE__ */ React57.createElement("circle", {
@@ -39151,7 +39572,7 @@ function createComputed(compute2, deps = []) {
   const scope = useReactScope();
   return React57.useMemo(() => scoped(() => computed(compute2), scope), [scope, ...deps]);
 }
-function createEffect(compute2, deps = []) {
+function createEffect2(compute2, deps = []) {
   const scope = useReactScope();
   React57.useEffect(() => scoped(() => effect(compute2), scope), [scope, ...deps]);
 }
@@ -39394,7 +39815,7 @@ class AudioGainRadioGroup extends Component {
   onSetup() {
     this.#media = useMediaContext();
     if (hasProvidedContext(menuContext)) {
-      this.#menu = useContext44(menuContext);
+      this.#menu = useContext45(menuContext);
     }
   }
   onConnect(el) {
@@ -39500,11 +39921,11 @@ var MediaPlayerBridge = createReactComponent(MediaPlayerInstance, {
   eventsRegex: /^onHls/,
   domEventsRegex: /^onMedia/
 });
-var MediaPlayer2 = React59.forwardRef(({ aspectRatio, children, ...props }, forwardRef15) => {
+var MediaPlayer2 = React59.forwardRef(({ aspectRatio, children, ...props }, forwardRef16) => {
   return /* @__PURE__ */ React59.createElement(MediaPlayerBridge, {
     ...props,
     src: props.src,
-    ref: forwardRef15,
+    ref: forwardRef16,
     style: {
       aspectRatio,
       ...props.style
@@ -39513,9 +39934,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 }, forwardRef15) => {
+var MediaProvider2 = React59.forwardRef(({ loaders = [], children, iframeProps, mediaProps, ...props }, forwardRef16) => {
   const reactLoaders = React59.useMemo(() => loaders.map((Loader) => new Loader), loaders);
-  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));
+  return /* @__PURE__ */ React59.createElement(MediaProviderBridge, { ...props, loaders: reactLoaders, ref: forwardRef16 }, (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 }) {
@@ -39585,48 +40006,48 @@ function Track3({ lang, ...props }) {
 }
 Track3.displayName = "Track";
 var ToggleButtonBridge = createReactComponent(ToggleButtonInstance);
-var ToggleButton2 = React59.forwardRef(({ children, ...props }, forwardRef15) => {
+var ToggleButton2 = React59.forwardRef(({ children, ...props }, forwardRef16) => {
   return /* @__PURE__ */ React59.createElement(ToggleButtonBridge, { ...props }, (props2) => /* @__PURE__ */ React59.createElement(Primitive3.button, {
     ...props2,
-    ref: composeRefs3(props2.ref, forwardRef15)
+    ref: composeRefs3(props2.ref, forwardRef16)
   }, children));
 });
 ToggleButton2.displayName = "ToggleButton";
 var PosterBridge = createReactComponent(PosterInstance);
-var Poster2 = React59.forwardRef(({ children, ...props }, forwardRef15) => {
+var Poster2 = React59.forwardRef(({ children, ...props }, forwardRef16) => {
   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, forwardRef15)
+    ref: composeRefs3(props2.ref, forwardRef16)
   }, children));
 });
 Poster2.displayName = "Poster";
-var PosterImg = React59.forwardRef(({ instance, children, ...props }, forwardRef15) => {
+var PosterImg = React59.forwardRef(({ instance, children, ...props }, forwardRef16) => {
   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, forwardRef15),
+    ref: composeRefs3(img.set, forwardRef16),
     style: { display: $hidden ? "none" : undefined }
   }, children);
 });
 PosterImg.displayName = "PosterImg";
-var Root7 = React59.forwardRef(({ children, ...props }, forwardRef15) => {
+var Root7 = React59.forwardRef(({ children, ...props }, forwardRef16) => {
   return /* @__PURE__ */ React59.createElement(Primitive3.div, {
     translate: "yes",
     "aria-live": "off",
     "aria-atomic": "true",
     ...props,
-    ref: forwardRef15
+    ref: forwardRef16
   }, children);
 });
 Root7.displayName = "Caption";
-var Text = React59.forwardRef((props, forwardRef15) => {
+var Text = React59.forwardRef((props, forwardRef16) => {
   const textTrack = useMediaState("textTrack"), [activeCue, setActiveCue] = React59.useState();
   React59.useEffect(() => {
     if (!textTrack)
@@ -39646,7 +40067,7 @@ var Text = React59.forwardRef((props, forwardRef15) => {
     dangerouslySetInnerHTML: {
       __html: activeCue?.text || ""
     },
-    ref: forwardRef15
+    ref: forwardRef16
   });
 });
 Text.displayName = "CaptionText";
@@ -39796,7 +40217,7 @@ function createDefaultMediaLayout({
     thumbnails = null,
     translations,
     ...props
-  }, forwardRef15) => {
+  }, forwardRef16) => {
     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);
@@ -39809,7 +40230,7 @@ function createDefaultMediaLayout({
       "data-lg": !isSmallLayout ? "" : null,
       "data-size": isSmallLayout ? "sm" : "lg",
       "data-no-scrub-gesture": noScrubGesture ? "" : null,
-      ref: composeRefs3(layoutEl.set, forwardRef15)
+      ref: composeRefs3(layoutEl.set, forwardRef16)
     }, canRender && isMatch ? /* @__PURE__ */ React61.createElement(DefaultLayoutContext.Provider, {
       value: {
         disableTimeSlider,
@@ -39870,9 +40291,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 }, forwardRef15) => {
+var DefaultMuteButton = React61.forwardRef(({ tooltip }, forwardRef16) => {
   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: 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" })));
+  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: forwardRef16 }, $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 }) {
@@ -40648,7 +41069,7 @@ function DefaultTimeSlider() {
   }, /* @__PURE__ */ React61.createElement(Chapters, {
     className: "vds-slider-chapters",
     disabled: width < sliderChaptersMinWidth
-  }, (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, {
+  }, (cues, forwardRef16) => cues.map((cue) => /* @__PURE__ */ React61.createElement("div", { className: "vds-slider-chapter", key: cue.startTime, ref: forwardRef16 }, /* @__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" })));
@@ -40752,7 +41173,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 }, forwardRef15) => {
+var DefaultKeyboardDisplay = React61.forwardRef(({ icons: Icons, ...props }, forwardRef16) => {
   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);
@@ -40763,7 +41184,7 @@ var DefaultKeyboardDisplay = React61.forwardRef(({ icons: Icons, ...props }, for
   }, [visible, $lastKeyboardAction]);
   const className = React61.useMemo(() => `vds-kb-action${!visible ? " hidden" : ""}${props.className ? ` ${props.className}` : ""}`, [visible]);
   const $$text = createComputed(getText), $text = useSignal($$text);
-  createEffect(() => {
+  createEffect2(() => {
     const Icon22 = getIcon(Icons);
     setIcon(() => Icon22);
   }, [Icons]);
@@ -40779,12 +41200,12 @@ var DefaultKeyboardDisplay = React61.forwardRef(({ icons: Icons, ...props }, for
     ...props,
     className,
     "data-action": actionDataAttr,
-    ref: forwardRef15
+    ref: forwardRef16
   }, /* @__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 } = useContext44(mediaContext), action = $state.lastKeyboardAction()?.action, audioGain = $state.audioGain() ?? 1;
+  const { $state } = useContext45(mediaContext), action = $state.lastKeyboardAction()?.action, audioGain = $state.audioGain() ?? 1;
   switch (action) {
     case "toggleMuted":
       return $state.muted() ? "0%" : getVolumeText($state.volume(), audioGain);
@@ -40799,7 +41220,7 @@ function getVolumeText(volume, gain) {
   return `${Math.round(volume * gain * 100)}%`;
 }
 function getIcon(Icons) {
-  const { $state } = useContext44(mediaContext), action = $state.lastKeyboardAction()?.action;
+  const { $state } = useContext45(mediaContext), action = $state.lastKeyboardAction()?.action;
   switch (action) {
     case "togglePaused":
       return !$state.paused() ? Icons.Play : Icons.Pause;
@@ -40991,10 +41412,10 @@ import"react-dom";
 "use client";
 
 // src/components/prompts/MuxPlayer.tsx
-import { useCallback as useCallback34 } from "react";
+import { useCallback as useCallback33 } from "react";
 import { jsx as jsx40, jsxs as jsxs6 } from "react/jsx-runtime";
 var MuxPlayer = ({ playbackId, title, rounded = true }) => {
-  const onProviderChange = useCallback34((provider2, _e) => {
+  const onProviderChange = useCallback33((provider2, _e) => {
     if (isHLSProvider(provider2)) {
       provider2.library = () => import("hls.js");
     }
@@ -41091,7 +41512,7 @@ var PromptsSubmitPage = () => {
     };
   }, []);
   const fileInputRef = useRef45(null);
-  const startUpload = useCallback35(async (file) => {
+  const startUpload = useCallback34(async (file) => {
     setUploadState({ type: "uploading", progress: 0 });
     try {
       const res = await fetch(`${REMOTION_PRO_ORIGIN}/api/prompts/upload`, {
@@ -41140,13 +41561,13 @@ var PromptsSubmitPage = () => {
       });
     }
   }, []);
-  const onFileSelect = useCallback35((e2) => {
+  const onFileSelect = useCallback34((e2) => {
     const file = e2.target.files?.[0];
     if (!file)
       return;
     startUpload(file);
   }, [startUpload]);
-  const onDrop = useCallback35((e2) => {
+  const onDrop = useCallback34((e2) => {
     e2.preventDefault();
     setIsDragging(false);
     if (uploadState.type !== "idle")
@@ -41158,21 +41579,21 @@ var PromptsSubmitPage = () => {
       return;
     startUpload(file);
   }, [startUpload, uploadState.type]);
-  const onDragOver = useCallback35((e2) => {
+  const onDragOver = useCallback34((e2) => {
     e2.preventDefault();
   }, []);
-  const onDragEnter = useCallback35(() => {
+  const onDragEnter = useCallback34(() => {
     if (uploadState.type === "idle") {
       setIsDragging(true);
     }
   }, [uploadState.type]);
-  const onDragLeave = useCallback35((e2) => {
+  const onDragLeave = useCallback34((e2) => {
     if (e2.currentTarget === e2.target) {
       setIsDragging(false);
     }
   }, []);
   const submitPossible = title.length > 0 && title.length <= 80 && prompt.length > 0 && usernameType && username.length > 0 && uploadState.type === "ready" && (submitStatus.type === "idle" || submitStatus.type === "error");
-  const submit = useCallback35(async () => {
+  const submit = useCallback34(async () => {
     if (!submitPossible || uploadState.type !== "ready")
       return;
     setSubmitStatus({ type: "submitting" });