@remotion/promo-pages 4.0.459 → 4.0.461

package/dist/Homepage.js

@@ -954,6 +954,7 @@ import {
 } from "react";
 import { jsx as jsx8 } 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 jsx9 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef3,
@@ -962,7 +963,6 @@ import {
   useMemo as useMemo16,
   useState as useState6
 } from "react";
-import { useRef as useRef5 } from "react";
 import { useContext as useContext14, useMemo as useMemo13 } from "react";
 import { useContext as useContext13 } from "react";
 import { useContext as useContext12, useMemo as useMemo12 } from "react";
@@ -971,6 +971,7 @@ import { createContext as createContext14 } from "react";
 import React12, { useCallback as useCallback5, useMemo as useMemo14, useRef as useRef6, useState as useState4 } from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
 import React13, { forwardRef as forwardRef2, useState as useState5, useContext as useContext15, useMemo as useMemo15 } from "react";
+import { createContext as createContext15 } from "react";
 import { jsx as jsx12 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef4,
@@ -984,7 +985,7 @@ import React15, { useCallback as useCallback6, useImperativeHandle, useRef as us
 import { jsx as jsx13 } from "react/jsx-runtime";
 import { jsx as jsx14 } from "react/jsx-runtime";
 import {
-  createContext as createContext15,
+  createContext as createContext16,
   forwardRef as forwardRef5,
   useCallback as useCallback7,
   useContext as useContext17,
@@ -996,7 +997,7 @@ import {
 import { jsx as jsx15 } from "react/jsx-runtime";
 import { useContext as useContext18, useLayoutEffect as useLayoutEffect5, useState as useState10 } from "react";
 import {
-  createContext as createContext16,
+  createContext as createContext17,
   useCallback as useCallback8,
   useImperativeHandle as useImperativeHandle3,
   useLayoutEffect as useLayoutEffect4,
@@ -1006,12 +1007,12 @@ import {
 } from "react";
 import { jsx as jsx16 } from "react/jsx-runtime";
 import { forwardRef as forwardRef8, useCallback as useCallback13, useContext as useContext30 } from "react";
-import React17, { createContext as createContext17, useMemo as useMemo19 } from "react";
+import React17, { createContext as createContext18, useMemo as useMemo19 } from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
 import { useContext as useContext19 } from "react";
-import { createContext as createContext18, useEffect as useEffect7, useState as useState11 } from "react";
+import { createContext as createContext19, useEffect as useEffect7, useState as useState11 } from "react";
 import { jsx as jsx18 } from "react/jsx-runtime";
-import { createContext as createContext19, useMemo as useMemo20, useReducer } from "react";
+import { createContext as createContext20, useMemo as useMemo20, useReducer } from "react";
 import { jsx as jsx19 } from "react/jsx-runtime";
 import React23, {
   forwardRef as forwardRef6,
@@ -1024,7 +1025,7 @@ import React23, {
 } from "react";
 import { useContext as useContext21, useLayoutEffect as useLayoutEffect6, useRef as useRef13 } from "react";
 import React20, {
-  createContext as createContext20,
+  createContext as createContext21,
   createRef as createRef2,
   useCallback as useCallback9,
   useContext as useContext20,
@@ -1060,7 +1061,7 @@ 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 createContext21, useContext as useContext27, useMemo as useMemo27 } from "react";
+import { createContext as createContext22, useContext as useContext27, useMemo as useMemo27 } from "react";
 import { jsx as jsx222 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef7,
@@ -1096,16 +1097,15 @@ import {
 import { jsx as jsx27 } from "react/jsx-runtime";
 import React29 from "react";
 import { useMemo as useMemo32 } from "react";
-import { createContext as createContext22, useContext as useContext32, useMemo as useMemo31 } from "react";
+import { createContext as createContext23, useContext as useContext32, useMemo as useMemo31 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
 import { jsx as jsx29 } from "react/jsx-runtime";
 import React31 from "react";
-import React32, { createContext as createContext23 } from "react";
-import { useContext as useContext33 } from "react";
+import React32, { createContext as createContext24 } from "react";
 import { useCallback as useCallback18 } from "react";
 import {
   useCallback as useCallback17,
-  useContext as useContext34,
+  useContext as useContext33,
   useEffect as useEffect16,
   useLayoutEffect as useLayoutEffect11,
   useMemo as useMemo33,
@@ -1114,7 +1114,7 @@ import {
 import { jsx as jsx30 } from "react/jsx-runtime";
 import React34, {
   forwardRef as forwardRef10,
-  useContext as useContext35,
+  useContext as useContext34,
   useEffect as useEffect18,
   useImperativeHandle as useImperativeHandle8,
   useMemo as useMemo34,
@@ -1128,14 +1128,14 @@ import React36, { useMemo as useMemo35 } from "react";
 import { jsx as jsx33 } from "react/jsx-runtime";
 import { Children, forwardRef as forwardRef11, useMemo as useMemo36 } from "react";
 import React37 from "react";
-import React38, { createContext as createContext24 } from "react";
+import React38, { createContext as createContext25 } from "react";
 import { jsx as jsx34 } from "react/jsx-runtime";
 import { jsx as jsx35 } from "react/jsx-runtime";
 import React40 from "react";
-import { forwardRef as forwardRef13, useCallback as useCallback19, useContext as useContext37 } from "react";
+import { forwardRef as forwardRef13, useCallback as useCallback19, useContext as useContext36 } from "react";
 import {
   forwardRef as forwardRef12,
-  useContext as useContext36,
+  useContext as useContext35,
   useEffect as useEffect19,
   useImperativeHandle as useImperativeHandle9,
   useLayoutEffect as useLayoutEffect12,
@@ -2416,6 +2416,39 @@ 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;
@@ -2489,39 +2522,6 @@ class CanvasPool {
     }
   }
 }
-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;
-};
 var devicePromise = null;
 var getGpuDevice = () => {
   if (devicePromise) {
@@ -2573,8 +2573,7 @@ var runEffectChain = async ({
 }) => {
   const runId = ++state.currentRunId;
   const isCancelled = () => state.currentRunId !== runId;
-  const flattened = flattenEffects(effects);
-  const runs = groupByBackend(flattened);
+  const runs = groupByBackend(effects);
   let currentImage = source;
   let lastTarget = null;
   if (runs.length === 0) {
@@ -2668,12 +2667,29 @@ var useEffectChainState = () => {
     }
   }), []);
 };
+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.459";
+var VERSION = "4.0.461";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -2701,20 +2717,6 @@ Check that all your Remotion packages are on the same version. If your dependenc
   }
   set();
 };
-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.stack === effects[i].stack);
-  if (isSame) {
-    return previous;
-  }
-  const next = effects.map((e) => ({
-    definition: e.definition,
-    stack: e.stack
-  }));
-  previousRef.current = next;
-  return next;
-};
 var useUnsafeVideoConfig = () => {
   const context = useContext12(SequenceContext);
   const ctxWidth = context?.width ?? null;
@@ -2872,6 +2874,22 @@ var sequenceStyleSchema = {
     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 = {
@@ -2892,6 +2910,9 @@ var sequenceSchemaDefaultLayoutNone = {
     default: "none"
   }
 };
+var nodePathToString = (nodePath) => {
+  return nodePath.join(".");
+};
 var SequenceManager = React12.createContext({
   registerSequence: () => {
     throw new Error("SequenceManagerContext not initialized");
@@ -2907,60 +2928,73 @@ var SequenceVisibilityToggleContext = React12.createContext({
     throw new Error("SequenceVisibilityToggle not initialized");
   }
 });
-var VisualModeOverridesContext = React12.createContext({
-  dragOverrides: {},
+var getCodeValuesCtx = (codeValues, nodePath) => {
+  const status = codeValues[nodePathToString(nodePath)];
+  if (!status) {
+    return;
+  }
+  if (!status.canUpdate) {
+    return;
+  }
+  return status.props;
+};
+var VisualModeCodeValuesContext = React12.createContext({
+  getCodeValues: () => {
+    throw new Error("VisualModeCodeValuesContext not initialized");
+  }
+});
+var VisualModeDragOverridesContext = React12.createContext({
+  getDragOverrides: () => {
+    throw new Error("VisualModeDragOverridesContext not initialized");
+  }
+});
+var VisualModeSettersContext = React12.createContext({
   setDragOverrides: () => {
-    throw new Error("VisualModeOverridesContext not initialized");
+    throw new Error("VisualModeSettersContext not initialized");
   },
   clearDragOverrides: () => {
-    throw new Error("VisualModeOverridesContext not initialized");
+    throw new Error("VisualModeSettersContext not initialized");
   },
-  codeValues: {},
   setCodeValues: () => {
-    throw new Error("VisualModeOverridesContext not initialized");
-  },
-  visualModeEnabled: false
+    throw new Error("VisualModeSettersContext not initialized");
+  }
 });
-var SequenceManagerProvider = ({ children, visualModeEnabled }) => {
+var SequenceManagerProvider = ({ children }) => {
   const [sequences, setSequences] = useState4([]);
   const [hidden, setHidden] = useState4({});
   const [dragOverrides, setControlOverrides] = useState4({});
   const controlOverridesRef = useRef6(dragOverrides);
   controlOverridesRef.current = dragOverrides;
   const [codeValues, setCodeValuesMapState] = useState4({});
-  const setDragOverrides = useCallback5((sequenceId, key, value) => {
+  const setDragOverrides = useCallback5((nodePath, key, value) => {
     setControlOverrides((prev) => ({
       ...prev,
-      [sequenceId]: {
-        ...prev[sequenceId],
+      [nodePathToString(nodePath)]: {
+        ...prev[nodePathToString(nodePath)],
         [key]: value
       }
     }));
   }, []);
-  const clearDragOverrides = useCallback5((sequenceId) => {
+  const clearDragOverrides = useCallback5((nodePath) => {
     setControlOverrides((prev) => {
-      if (!prev[sequenceId]) {
+      const key = nodePathToString(nodePath);
+      if (!prev[key]) {
         return prev;
       }
       const next = { ...prev };
-      delete next[sequenceId];
+      delete next[key];
       return next;
     });
   }, []);
-  const setCodeValues = useCallback5((sequenceId, values) => {
+  const setCodeValues = useCallback5((nodePath, values) => {
     setCodeValuesMapState((prev) => {
-      if (prev[sequenceId] === values) {
+      const key = nodePathToString(nodePath);
+      const prevKey = prev[key];
+      const newKey = values(prevKey);
+      if (prevKey === newKey) {
         return prev;
       }
-      if (values === null) {
-        if (!(sequenceId in prev)) {
-          return prev;
-        }
-        const next = { ...prev };
-        delete next[sequenceId];
-        return next;
-      }
-      return { ...prev, [sequenceId]: values };
+      return { ...prev, [key]: newKey };
     });
   }, []);
   const registerSequence = useCallback5((seq) => {
@@ -2984,40 +3018,85 @@ var SequenceManagerProvider = ({ children, visualModeEnabled }) => {
       setHidden
     };
   }, [hidden]);
-  const overrideContext = useMemo14(() => {
+  const getDragOverrides = useCallback5((nodePath) => {
+    return dragOverrides[nodePathToString(nodePath)] ?? {};
+  }, [dragOverrides]);
+  const getCodeValues = useCallback5((nodePath) => {
+    return getCodeValuesCtx(codeValues, nodePath);
+  }, [codeValues]);
+  const codeValuesContext = useMemo14(() => {
+    return {
+      getCodeValues
+    };
+  }, [getCodeValues]);
+  const dragOverridesContext = useMemo14(() => {
+    return {
+      getDragOverrides
+    };
+  }, [getDragOverrides]);
+  const settersContext = useMemo14(() => {
     return {
-      visualModeEnabled,
-      dragOverrides,
       setDragOverrides,
       clearDragOverrides,
-      codeValues,
       setCodeValues
     };
-  }, [
-    visualModeEnabled,
-    dragOverrides,
-    setDragOverrides,
-    clearDragOverrides,
-    codeValues,
-    setCodeValues
-  ]);
+  }, [setDragOverrides, clearDragOverrides, setCodeValues]);
   return /* @__PURE__ */ jsx11(SequenceManager.Provider, {
     value: sequenceContext,
     children: /* @__PURE__ */ jsx11(SequenceVisibilityToggleContext.Provider, {
       value: hiddenContext,
-      children: /* @__PURE__ */ jsx11(VisualModeOverridesContext.Provider, {
-        value: overrideContext,
-        children
+      children: /* @__PURE__ */ jsx11(VisualModeCodeValuesContext.Provider, {
+        value: codeValuesContext,
+        children: /* @__PURE__ */ jsx11(VisualModeDragOverridesContext.Provider, {
+          value: dragOverridesContext,
+          children: /* @__PURE__ */ jsx11(VisualModeSettersContext.Provider, {
+            value: settersContext,
+            children
+          })
+        })
       })
     })
   });
 };
 var ENABLE_V5_BREAKING_CHANGES = false;
+var deleteNestedKey = (obj, keysToRemove) => {
+  for (const key of keysToRemove) {
+    const parts = key.split(".");
+    const parents = [obj];
+    let current = obj;
+    for (let i = 0;i < parts.length - 1; i++) {
+      const part = parts[i];
+      const next = current[part];
+      if (next === undefined || next === null) {
+        current = null;
+        break;
+      }
+      current = next;
+      parents.push(current);
+    }
+    if (current === null) {
+      continue;
+    }
+    delete current[parts[parts.length - 1]];
+    for (let i = parents.length - 1;i > 0; i--) {
+      const parent = parents[i];
+      if (Object.keys(parent).length === 0) {
+        const parentKey = parts[i - 1];
+        delete parents[i - 1][parentKey];
+      } else {
+        break;
+      }
+    }
+  }
+  return obj;
+};
 var flattenActiveSchema = (schema, resolve) => {
   const out = {};
   for (const key of Object.keys(schema)) {
     const field = schema[key];
-    if (field.type === "enum") {
+    if (field.type === "hidden") {
+      continue;
+    } else if (field.type === "enum") {
       out[key] = field;
       const current = resolve(key) ?? field.default;
       const variant = field.variants[current];
@@ -3052,6 +3131,44 @@ var getFlatSchemaWithAllKeys = (schema) => {
   }
   return out;
 };
+var OverrideIdsToNodePathsGettersContext = createContext15({
+  overrideIdToNodePathMappings: {}
+});
+var OverrideIdsToNodePathsSettersContext = createContext15({
+  setOverrideIdToNodePath: () => {
+    throw new Error("OverrideIdsToNodePathsSettersContext not initialized");
+  }
+});
+var findPropsToDelete = ({
+  schema,
+  key,
+  value
+}) => {
+  const fieldSchema = schema[key];
+  if (!fieldSchema) {
+    throw new Error("Key " + JSON.stringify(key) + " not found in schema");
+  }
+  if (typeof value !== "string") {
+    throw new Error("Value must be a string, but is " + JSON.stringify(value));
+  }
+  if (fieldSchema.type !== "enum") {
+    throw new Error("Key " + JSON.stringify(key) + " is not an enum");
+  }
+  const currentVariant = fieldSchema.variants[value];
+  if (!currentVariant) {
+    throw new Error("Value for " + JSON.stringify(key) + " must be one of " + Object.keys(fieldSchema.variants).map((v) => JSON.stringify(v)).join(", ") + ", got " + JSON.stringify(value));
+  }
+  const otherVariants = Object.keys(fieldSchema.variants).filter((v) => v !== value);
+  const otherKeys = new Set;
+  for (const variant of otherVariants) {
+    const otherVariant = fieldSchema.variants[variant];
+    const keys = Object.keys(otherVariant);
+    for (const k of keys) {
+      otherKeys.add(k);
+    }
+  }
+  return [...otherKeys];
+};
 var getEffectiveVisualModeValue = ({
   codeValue,
   runtimeValue,
@@ -3097,17 +3214,38 @@ var computeEffectiveSchemaValuesDotNotation = ({
   propStatus
 }) => {
   const merged = {};
+  const propsToDelete = new Set;
   for (const key of Object.keys(currentValue)) {
     const codeValueStatus = propStatus?.[key] ?? null;
-    merged[key] = getEffectiveVisualModeValue({
+    const field = findFieldInSchema(schema, key);
+    if (field?.type === "hidden") {
+      continue;
+    }
+    const value = getEffectiveVisualModeValue({
       codeValue: codeValueStatus,
       runtimeValue: currentValue[key],
       dragOverrideValue: overrideValues[key],
-      defaultValue: findFieldInSchema(schema, key)?.default,
+      defaultValue: field?.default,
       shouldResortToDefaultValueIfUndefined: false
     });
+    if (value === undefined) {
+      propsToDelete.add(key);
+    }
+    merged[key] = value;
   }
-  return merged;
+  for (const key of Object.keys(overrideValues)) {
+    if (schema[key]?.type === "enum") {
+      const propsToDeleteForKey = findPropsToDelete({
+        schema,
+        key,
+        value: merged[key]
+      });
+      for (const propToDelete of propsToDeleteForKey) {
+        propsToDelete.add(propToDelete);
+      }
+    }
+  }
+  return { merged, propsToDelete };
 };
 var getNestedValue = (obj, key) => {
   const parts = key.split(".");
@@ -3132,7 +3270,8 @@ var selectActiveKeys = (schema, values) => {
 var mergeValues = ({
   props,
   valuesDotNotation,
-  schemaKeys
+  schemaKeys,
+  propsToDelete
 }) => {
   const merged = { ...props };
   for (const key of schemaKeys) {
@@ -3154,31 +3293,45 @@ var mergeValues = ({
     }
     current[parts[parts.length - 1]] = value;
   }
+  deleteNestedKey(merged, propsToDelete);
   return merged;
 };
+var stackToOverrideMap = {};
 var wrapInSchema = (Component, schema) => {
-  if (typeof process === "undefined" || !process.env?.EXPERIMENTAL_VISUAL_MODE_ENABLED) {
-    return Component;
-  }
   const flatSchema = getFlatSchemaWithAllKeys(schema);
   const flatKeys = Object.keys(flatSchema);
   const Wrapped = forwardRef2((props, ref) => {
     const env = useRemotionEnvironment();
-    const { visualModeEnabled, dragOverrides, codeValues } = useContext15(VisualModeOverridesContext);
-    if (!env.isStudio || env.isReadOnlyStudio || env.isRendering || !visualModeEnabled) {
+    if (!env.isStudio || env.isReadOnlyStudio || env.isRendering) {
       return React13.createElement(Component, {
         ...props,
         _experimentalControls: null,
         ref
       });
     }
+    const { getCodeValues } = useContext15(VisualModeCodeValuesContext);
+    const { getDragOverrides } = useContext15(VisualModeDragOverridesContext);
+    const nodePathMapping = useContext15(OverrideIdsToNodePathsGettersContext);
     if (props._experimentalControls) {
       return React13.createElement(Component, {
         ...props,
         ref
       });
     }
-    const [overrideId] = useState5(() => String(Math.random()));
+    const [overrideId] = useState5(() => {
+      const { stack } = props;
+      if (!stack) {
+        return String(Math.random());
+      }
+      const existingOverrideId = stackToOverrideMap[stack];
+      if (existingOverrideId) {
+        return existingOverrideId;
+      }
+      const newOverrideId = String(Math.random());
+      stackToOverrideMap[stack] = newOverrideId;
+      return newOverrideId;
+    });
+    const nodePath = nodePathMapping.overrideIdToNodePathMappings[overrideId] ?? null;
     const runtimeValues = flatKeys.map((k) => getNestedValue(props, k));
     const currentRuntimeValueDotNotation = useMemo15(() => readValuesFromProps(props, flatKeys), runtimeValues);
     const controls = useMemo15(() => {
@@ -3188,19 +3341,25 @@ var wrapInSchema = (Component, schema) => {
         overrideId
       };
     }, [currentRuntimeValueDotNotation, overrideId]);
-    const valuesDotNotation = useMemo15(() => {
+    const { merged: valuesDotNotation, propsToDelete } = useMemo15(() => {
       return computeEffectiveSchemaValuesDotNotation({
         schema,
         currentValue: currentRuntimeValueDotNotation,
-        overrideValues: dragOverrides[overrideId] ?? {},
-        propStatus: codeValues[overrideId]
+        overrideValues: nodePath === null ? {} : getDragOverrides(nodePath),
+        propStatus: nodePath === null ? undefined : getCodeValues(nodePath)
       });
-    }, [currentRuntimeValueDotNotation, dragOverrides, overrideId, codeValues]);
+    }, [
+      currentRuntimeValueDotNotation,
+      getDragOverrides,
+      nodePath,
+      getCodeValues
+    ]);
     const activeKeys = selectActiveKeys(schema, valuesDotNotation);
     const mergedProps = mergeValues({
       props,
       valuesDotNotation,
-      schemaKeys: activeKeys
+      schemaKeys: activeKeys,
+      propsToDelete
     });
     return React13.createElement(Component, {
       ...mergedProps,
@@ -3296,7 +3455,6 @@ var RegularSequenceRefForwardingFunction = ({
   }, [name]);
   const env = useRemotionEnvironment();
   const inheritedStack = other?.stack ?? null;
-  const memoizedEffects = useMemoizedEffects(flattenEffects(_experimentalEffects ?? []));
   useEffect5(() => {
     if (!env.isStudio) {
       return;
@@ -3305,7 +3463,7 @@ var RegularSequenceRefForwardingFunction = ({
       registerSequence({
         type: isMedia.type,
         controls: controls ?? null,
-        effects: memoizedEffects,
+        effects: _experimentalEffects ?? [],
         displayName: timelineClipName,
         doesVolumeChange: isMedia.data.doesVolumeChange,
         duration: actualDurationInFrames,
@@ -3343,7 +3501,7 @@ var RegularSequenceRefForwardingFunction = ({
       premountDisplay: premountDisplay ?? null,
       postmountDisplay: postmountDisplay ?? null,
       controls: controls ?? null,
-      effects: memoizedEffects
+      effects: _experimentalEffects ?? []
     });
     return () => {
       unregisterSequence(id);
@@ -3368,7 +3526,7 @@ var RegularSequenceRefForwardingFunction = ({
     env.isStudio,
     inheritedStack,
     controls,
-    memoizedEffects,
+    _experimentalEffects,
     isMedia
   ]);
   const endThreshold = Math.ceil(cumulatedFrom + from + durationInFrames - 1);
@@ -3859,7 +4017,7 @@ var defaultOnPaint = ({
   const transform = ctx.drawElementImage(elementImage, 0, 0);
   element.style.transform = transform.toString();
 };
-var HtmlInCanvasAncestorContext = createContext15(false);
+var HtmlInCanvasAncestorContext = createContext16(false);
 var HtmlInCanvasInner = forwardRef5(({
   width,
   height,
@@ -3893,8 +4051,9 @@ var HtmlInCanvasInner = forwardRef5(({
   }, [ref]);
   const [offscreenCanvas] = useState8(() => new OffscreenCanvas(1, 1));
   const chainState = useEffectChainState();
-  const effectsRef = useRef9(effects);
-  effectsRef.current = effects;
+  const memoizedEffects = useMemoizedEffects(flattenEffects(effects));
+  const effectsRef = useRef9(memoizedEffects);
+  effectsRef.current = memoizedEffects;
   const frameRef = useRef9(frame);
   frameRef.current = frame;
   const onPaintRef = useRef9(onPaint);
@@ -3994,7 +4153,7 @@ var HtmlInCanvasInner = forwardRef5(({
       return;
     }
     canvas.requestPaint?.();
-  }, [onPaint]);
+  }, [onPaint, memoizedEffects]);
   useLayoutEffect3(() => {
     const canvas = canvas2dRef.current;
     if (!canvas) {
@@ -4021,7 +4180,7 @@ var HtmlInCanvasInner = forwardRef5(({
     durationInFrames: resolvedDuration,
     name: "<HtmlInCanvas>",
     _experimentalControls: controls,
-    _experimentalEffects: effects,
+    _experimentalEffects: memoizedEffects,
     layout: "none",
     ...sequenceProps,
     children: /* @__PURE__ */ jsx15(HtmlInCanvasAncestorContext.Provider, {
@@ -4076,7 +4235,7 @@ var validateRenderAsset = (artifact) => {
   }
   validateContent(artifact.content);
 };
-var RenderAssetManager = createContext16({
+var RenderAssetManager = createContext17({
   registerRenderAsset: () => {
     return;
   },
@@ -4214,7 +4373,7 @@ var calculateMediaDuration = ({
   const actualDuration = duration / playbackRate;
   return Math.floor(actualDuration);
 };
-var LoopContext = createContext17(null);
+var LoopContext = createContext18(null);
 var useLoop = () => {
   return React17.useContext(LoopContext);
 };
@@ -4285,7 +4444,7 @@ var playbackLogging = ({
   const tags = [mountTime ? Date.now() - mountTime + "ms " : null, tag].filter(Boolean).join(" ");
   Log.trace({ logLevel, tag: null }, `[${tags}]`, message);
 };
-var PreloadContext = createContext18({});
+var PreloadContext = createContext19({});
 var preloads = {};
 var updaters = [];
 var setPreloads = (updater) => {
@@ -4606,7 +4765,7 @@ var durationReducer = (state, action) => {
       return state;
   }
 };
-var DurationsContext = createContext19({
+var DurationsContext = createContext20({
   durations: {},
   setDurations: () => {
     throw new Error("context missing");
@@ -4820,8 +4979,8 @@ var didPropChange = (key, newProp, prevProp) => {
   }
   return true;
 };
-var SharedAudioContext = createContext20(null);
-var SharedAudioTagsContext = createContext20(null);
+var SharedAudioContext = createContext21(null);
+var SharedAudioTagsContext = createContext21(null);
 var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled }) => {
   const logLevel = useLogLevel();
   const ctxAndGain = useSingletonAudioContext({
@@ -4866,8 +5025,9 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled })
       if (!ctxAndGain) {
         throw new Error("Audio context not found");
       }
+      const saveForLater = ctxAndGain.audioContext.state === "suspended" && !isResuming.current;
       if (duration > 0) {
-        if (ctxAndGain.audioContext.state === "suspended") {
+        if (saveForLater) {
           nodesToResume.current.set(node, {
             scheduledTime,
             offset,
@@ -4885,7 +5045,7 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled })
       const prev = prevEndTimes.current;
       const scheduledMismatch = prev.scheduledEndTime !== null && Math.abs(scheduledTime - prev.scheduledEndTime) > 0.001;
       const mediaMismatch = prev.mediaEndTime !== null && Math.abs(mediaTime - prev.mediaEndTime) > 0.001;
-      Log.verbose({ logLevel, tag: "audio-scheduling" }, "scheduled %c%s%c %s %c%s%c %s %c%s%c %s %s %s", scheduledMismatch ? "color: red; font-weight: bold" : "", scheduledTime.toFixed(4), "", scheduledEndTime.toFixed(4), mediaMismatch ? "color: red; font-weight: bold" : "", mediaTime.toFixed(4), "", mediaEndTime.toFixed(4), duration < 0 ? "color: red; font-weight: bold" : timeDiff < 0 ? "color: red; font-weight: bold" : "color: blue; font-weight: bold", duration < 0 ? "missed " + Math.abs(offset).toFixed(2) + "s" : Math.abs(timeDiff).toFixed(2) + (timeDiff < 0 ? " delay" : " ahead"), "", "current=" + currentTime.toFixed(4), "offset=" + offset.toFixed(4), "latency=" + latency.toFixed(4), "state=" + ctxAndGain.audioContext.state, originalUnloopedMediaTimestamp !== mediaTime ? "original_ts=" + originalUnloopedMediaTimestamp.toFixed(4) : "");
+      Log.verbose({ logLevel, tag: "audio-scheduling" }, "scheduled %c%s%c %s %c%s%c %s %c%s%c %s %s %s %s %s", scheduledMismatch ? "color: red; font-weight: bold" : "", scheduledTime.toFixed(4), "", scheduledEndTime.toFixed(4), mediaMismatch ? "color: red; font-weight: bold" : "", mediaTime.toFixed(4), "", mediaEndTime.toFixed(4), duration < 0 ? "color: red; font-weight: bold" : timeDiff < 0 ? "color: red; font-weight: bold" : "color: blue; font-weight: bold", duration < 0 ? "missed " + Math.abs(offset).toFixed(2) + "s" : Math.abs(timeDiff).toFixed(2) + (timeDiff < 0 ? " delay" : " ahead"), "", "current=" + currentTime.toFixed(4), "actualcurrent=" + ctxAndGain.audioContext.currentTime.toFixed(4), "offset=" + offset.toFixed(4), "latency=" + latency.toFixed(4), "state=" + ctxAndGain.audioContext.state, originalUnloopedMediaTimestamp !== mediaTime ? "original_ts=" + originalUnloopedMediaTimestamp.toFixed(4) : "", "action=" + (saveForLater ? "schedule" : "start"), "");
       prev.scheduledEndTime = scheduledEndTime;
       prev.mediaEndTime = mediaEndTime;
       return duration > 0 ? {
@@ -4905,6 +5065,13 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled })
       return Promise.resolve();
     }
     audioContextIsPlayingEventually.current = true;
+    ctxAndGain.gainNode.gain.cancelScheduledValues(ctxAndGain.audioContext.currentTime);
+    ctxAndGain.gainNode.gain.setValueAtTime(0, ctxAndGain.audioContext.currentTime);
+    ctxAndGain.gainNode.gain.linearRampToValueAtTime(1, ctxAndGain.audioContext.currentTime + 0.03);
+    nodesToResume.current.forEach((r, node) => {
+      node.start(r.scheduledTime, r.offset, r.duration);
+    });
+    nodesToResume.current.clear();
     const resumePromise = ctxAndGain.audioContext.resume();
     isResuming.current = new Promise((resolve) => {
       waitUntilActuallyResumed(ctxAndGain.audioContext, logLevel).then(resolve);
@@ -4915,11 +5082,6 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled })
     }).finally(() => {
       isResuming.current = null;
     });
-    ctxAndGain.gainNode.gain.cancelScheduledValues(ctxAndGain.audioContext.currentTime);
-    ctxAndGain.gainNode.gain.setValueAtTime(0, ctxAndGain.audioContext.currentTime);
-    ctxAndGain.gainNode.gain.linearRampToValueAtTime(1, ctxAndGain.audioContext.currentTime + 0.03);
-    nodesToResume.current.forEach((r, node) => node.start(r.scheduledTime, r.offset, r.duration));
-    nodesToResume.current.clear();
     return resumePromise.catch(() => {});
   }, [ctxAndGain, logLevel]);
   const getIsResumingAudioContext = useCallback9(() => {
@@ -5721,9 +5883,14 @@ var useBufferManager = (logLevel, mountTime) => {
         }
       };
     }
+    let unblocked = false;
     setBlocks((b) => [...b, block]);
     return {
       unblock: () => {
+        if (unblocked) {
+          return;
+        }
+        unblocked = true;
         setBlocks((b) => {
           const newArr = b.filter((bx) => bx !== block);
           if (newArr.length === b.length) {
@@ -5817,18 +5984,30 @@ var useIsPlayerBuffering = (bufferManager) => {
 };
 var useBufferState = () => {
   const buffer = useContext25(BufferingContextReact);
+  const logLevel = useLogLevel();
   const addBlock = buffer ? buffer.addBlock : null;
   return useMemo25(() => ({
     delayPlayback: () => {
       if (!addBlock) {
         throw new Error("Tried to enable the buffering state, but a Remotion context was not found. This API can only be called in a component that was passed to the Remotion Player or a <Composition>. Or you might have experienced a version mismatch - run `npx remotion versions` and ensure all packages have the same version. This error is thrown by the buffer state https://remotion.dev/docs/player/buffer-state");
       }
+      Log.trace({ logLevel, tag: "[buffer-state]" }, "Adding buffer handle", new Error().stack);
       const { unblock } = addBlock({
         id: String(Math.random())
       });
-      return { unblock };
+      let unblocked = false;
+      return {
+        unblock: () => {
+          if (unblocked) {
+            return;
+          }
+          unblocked = true;
+          Log.trace({ logLevel, tag: "[buffer-state]" }, "Removing buffer handle");
+          unblock();
+        }
+      };
     }
-  }), [addBlock]);
+  }), [addBlock, logLevel]);
 };
 var isSafariWebkit = () => {
   const isSafari2 = /^((?!chrome|android).)*safari/i.test(window.navigator.userAgent);
@@ -6596,11 +6775,11 @@ var useMediaTag = ({
     env.isPlayer
   ]);
 };
-var MediaVolumeContext = createContext21({
+var MediaVolumeContext = createContext22({
   mediaMuted: false,
   mediaVolume: 1
 });
-var SetMediaVolumeContext = createContext21({
+var SetMediaVolumeContext = createContext22({
   setMediaMuted: () => {
     throw new Error("default");
   },
@@ -7406,10 +7585,13 @@ var makeDefaultPreviewCSS = (scope, backgroundColor) => {
 };
 var defineEffect = (definition) => definition;
 var createDescriptor = (definition, params) => {
+  const widened = definition;
   return {
-    definition,
+    definition: widened,
     params,
-    stack: new Error().stack
+    stack: new Error().stack,
+    effectKey: widened.calculateKey(params),
+    memoized: false
   };
 };
 var REMOTION_STUDIO_CONTAINER_ELEMENT = "__remotion-studio-container";
@@ -7434,7 +7616,7 @@ var waitForRoot = (fn) => {
     listeners = listeners.filter((l) => l !== fn);
   };
 };
-var MediaEnabledContext = createContext22(null);
+var MediaEnabledContext = createContext23(null);
 var useVideoEnabled = () => {
   const context = useContext32(MediaEnabledContext);
   if (!context) {
@@ -7473,8 +7655,7 @@ var RemotionRootContexts = ({
   audioLatencyHint,
   videoEnabled,
   audioEnabled,
-  frameState,
-  visualModeEnabled
+  frameState
 }) => {
   const nonceContext = useMemo32(() => {
     let counter = 0;
@@ -7497,7 +7678,6 @@ var RemotionRootContexts = ({
           children: /* @__PURE__ */ jsx29(EditorPropsProvider, {
             children: /* @__PURE__ */ jsx29(PrefetchProvider, {
               children: /* @__PURE__ */ jsx29(SequenceManagerProvider, {
-                visualModeEnabled,
                 children: /* @__PURE__ */ jsx29(DurationsContextProvider, {
                   children: /* @__PURE__ */ jsx29(BufferingProvider, {
                     children: /* @__PURE__ */ jsx29(SharedAudioContextProvider, {
@@ -7716,7 +7896,7 @@ var setupEnvVariables = () => {
   });
 };
 var CurrentScaleContext = React32.createContext(null);
-var PreviewSizeContext = createContext23({
+var PreviewSizeContext = createContext24({
   setSize: () => {
     return;
   },
@@ -7739,14 +7919,6 @@ var calculateScale = ({
   }
   return Number(previewSize);
 };
-var useSequenceControlOverride = (key) => {
-  const seqContext = useContext33(SequenceContext);
-  const { dragOverrides: overrides } = useContext33(VisualModeOverridesContext);
-  if (!seqContext) {
-    return;
-  }
-  return overrides[seqContext.id]?.[key];
-};
 var getOffthreadVideoSource = ({
   src,
   transparent,
@@ -7778,9 +7950,9 @@ var OffthreadVideoForRendering = ({
   const frame = useCurrentFrame();
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior);
   const videoConfig = useUnsafeVideoConfig();
-  const sequenceContext = useContext34(SequenceContext);
+  const sequenceContext = useContext33(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext34(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext33(RenderAssetManager);
   if (!src) {
     throw new TypeError("No `src` was passed to <OffthreadVideo>.");
   }
@@ -7992,7 +8164,7 @@ class MediaPlaybackError extends Error {
   }
 }
 var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
-  const context = useContext35(SharedAudioContext);
+  const context = useContext34(SharedAudioContext);
   if (!context) {
     throw new Error("SharedAudioContext not found");
   }
@@ -8048,8 +8220,8 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   }
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const { fps, durationInFrames } = useVideoConfig();
-  const parentSequence = useContext35(SequenceContext);
-  const { hidden } = useContext35(SequenceVisibilityToggleContext);
+  const parentSequence = useContext34(SequenceContext);
+  const { hidden } = useContext34(SequenceVisibilityToggleContext);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const [timelineId] = useState21(() => String(Math.random()));
@@ -8473,7 +8645,9 @@ var Internals = {
   VideoForPreview,
   CompositionManager,
   CompositionSetters,
-  VisualModeOverridesContext,
+  VisualModeCodeValuesContext,
+  VisualModeDragOverridesContext,
+  VisualModeSettersContext,
   SequenceManager,
   SequenceStackTracesUpdateContext,
   SequenceVisibilityToggleContext,
@@ -8482,7 +8656,6 @@ var Internals = {
   sequenceStyleSchema,
   flattenActiveSchema,
   getFlatSchemaWithAllKeys,
-  useSequenceControlOverride,
   RemotionRootContexts,
   CompositionManagerProvider,
   useVideo,
@@ -8575,7 +8748,11 @@ var Internals = {
   useMemoizedEffects,
   defineEffect,
   createDescriptor,
-  computeEffectiveSchemaValuesDotNotation
+  computeEffectiveSchemaValuesDotNotation,
+  OverrideIdsToNodePathsGettersContext,
+  OverrideIdsToNodePathsSettersContext,
+  findPropsToDelete,
+  flattenEffects
 };
 var NUMBER = "[-+]?\\d*\\.?\\d+";
 var PERCENTAGE = NUMBER + "%";
@@ -8613,7 +8790,7 @@ var flattenChildren = (children) => {
     return flatChildren;
   }, []);
 };
-var IsInsideSeriesContext = createContext24(false);
+var IsInsideSeriesContext = createContext25(false);
 var IsInsideSeriesContainer = ({ children }) => {
   return /* @__PURE__ */ jsx34(IsInsideSeriesContext.Provider, {
     value: true,
@@ -8655,9 +8832,6 @@ var SeriesInner = (props2) => {
         throw new TypeError(`The <Series /> component only accepts a list of <Series.Sequence /> components as its children, but got ${castedChild} instead`);
       }
       const debugInfo = `index = ${i}, duration = ${castedChild.props.durationInFrames}`;
-      if (!castedChild?.props.children) {
-        throw new TypeError(`A <Series.Sequence /> component (${debugInfo}) was detected to not have any children. Delete it to fix this error.`);
-      }
       const durationInFramesProp = castedChild.props.durationInFrames;
       const {
         durationInFrames,
@@ -9173,13 +9347,13 @@ var VideoForRenderingForwardFunction = ({
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const videoConfig = useUnsafeVideoConfig();
   const videoRef = useRef23(null);
-  const sequenceContext = useContext36(SequenceContext);
+  const sequenceContext = useContext35(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
   const environment = useRemotionEnvironment();
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext36(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext35(RenderAssetManager);
   const id = useMemo37(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     props2.src,
     sequenceContext?.cumulatedFrom,
@@ -9389,7 +9563,7 @@ var VideoForwardingFunction = (props2, ref) => {
   if (environment.isClientSideRendering) {
     throw new Error("<Html5Video> is not supported in @remotion/web-renderer. Use <Video> from @remotion/media instead. See https://remotion.dev/docs/client-side-rendering/limitations");
   }
-  const { durations, setDurations } = useContext37(DurationsContext);
+  const { durations, setDurations } = useContext36(DurationsContext);
   if (typeof ref === "string") {
     throw new Error("string refs are not supported");
   }
@@ -24392,7 +24566,7 @@ var InstallsPerMonth = () => {
         },
         children: [
           /* @__PURE__ */ jsx50(StatItemContent, {
-            content: "1.4M",
+            content: "3M",
             width: "100px",
             fontSize: "2.5rem",
             fontWeight: "bold"
@@ -24414,7 +24588,7 @@ var InstallsPerMonth = () => {
         ]
       }),
       /* @__PURE__ */ jsx50(StatItemContent, {
-        content: "installs per month",
+        content: "installs",
         width: "75%",
         fontSize: "1.0rem",
         fontWeight: "bold"
@@ -24500,7 +24674,7 @@ var GitHubStars = () => {
             width: "45px"
           }),
           /* @__PURE__ */ jsx50(StatItemContent, {
-            content: "45k",
+            content: "46k",
             width: "80px",
             fontSize: "2.5rem",
             fontWeight: "bold"
@@ -24693,59 +24867,58 @@ import { jsx as jsx56, jsxs as jsxs13 } from "react/jsx-runtime";
 import { jsx as jsx214, jsxs as jsxs24, Fragment as Fragment11 } from "react/jsx-runtime";
 import React56 from "react";
 import { useContext as useContext210, useEffect as useEffect42, useState as useState40 } from "react";
-import { useContext as useContext44, useLayoutEffect as useLayoutEffect17 } from "react";
+import { useContext as useContext43, useLayoutEffect as useLayoutEffect17 } from "react";
 import { jsx as jsx313 } from "react/jsx-runtime";
-import { useCallback as useCallback34, useRef as useRef42 } from "react";
 import { useEffect as useEffect24, useState as useState24 } from "react";
 import { useLayoutEffect as useLayoutEffect23 } from "react";
-import { useContext as useContext45, useEffect as useEffect52, useRef as useRef52 } from "react";
-import { useEffect as useEffect310, useRef as useRef310 } from "react";
-import { useCallback as useCallback24, useContext as useContext39, useMemo as useMemo51, useRef as useRef26, useState as useState310 } from "react";
-import { useEffect as useEffect43, useRef as useRef43 } from "react";
-import { useCallback as useCallback35, useEffect as useEffect62, useMemo as useMemo212, useState as useState42 } from "react";
+import { useContext as useContext44, useEffect as useEffect52, useRef as useRef42 } from "react";
+import { useEffect as useEffect310, useRef as useRef26 } from "react";
+import { useCallback as useCallback34, useContext as useContext38, useMemo as useMemo51, useRef as useRef43, useState as useState310 } from "react";
+import { useEffect as useEffect43, useRef as useRef310 } from "react";
+import { useCallback as useCallback24, useEffect as useEffect62, useMemo as useMemo212, useState as useState42 } from "react";
 import {
   forwardRef as forwardRef210,
   useEffect as useEffect132,
   useImperativeHandle as useImperativeHandle22,
   useLayoutEffect as useLayoutEffect33,
   useMemo as useMemo142,
-  useRef as useRef122,
+  useRef as useRef112,
   useState as useState132
 } from "react";
 import React102, {
   Suspense as Suspense2,
   forwardRef as forwardRef33,
-  useCallback as useCallback112,
+  useCallback as useCallback102,
   useContext as useContext52,
   useEffect as useEffect122,
   useImperativeHandle as useImperativeHandle10,
   useMemo as useMemo122,
-  useRef as useRef112,
+  useRef as useRef102,
   useState as useState113
 } from "react";
 import React310 from "react";
 import { jsx as jsx410 } from "react/jsx-runtime";
 import React410, { useEffect as useEffect72 } from "react";
 import { jsx as jsx55 } from "react/jsx-runtime";
-import { useCallback as useCallback82, useEffect as useEffect112, useMemo as useMemo92, useRef as useRef92, useState as useState102 } from "react";
+import { useCallback as useCallback72, useEffect as useEffect112, useMemo as useMemo92, useRef as useRef82, useState as useState102 } from "react";
 import { jsx as jsx64 } from "react/jsx-runtime";
-import { useCallback as useCallback52, useMemo as useMemo410, useRef as useRef62, useState as useState62 } from "react";
-import React54, { useCallback as useCallback42, useMemo as useMemo39, useState as useState52 } from "react";
+import { useCallback as useCallback42, useMemo as useMemo410, useRef as useRef52, useState as useState62 } from "react";
+import React54, { useCallback as useCallback35, useMemo as useMemo39, useState as useState52 } from "react";
 import { jsx as jsx74, jsxs as jsxs33 } from "react/jsx-runtime";
 import { jsx as jsx84, jsxs as jsxs43 } from "react/jsx-runtime";
-import { useCallback as useCallback62, useEffect as useEffect92, useMemo as useMemo52, useState as useState82 } from "react";
-import { useEffect as useEffect83, useRef as useRef72, useState as useState72 } from "react";
+import { useCallback as useCallback52, useEffect as useEffect92, useMemo as useMemo52, useState as useState82 } from "react";
+import { useEffect as useEffect83, useRef as useRef62, useState as useState72 } from "react";
 import { jsx as jsx94, jsxs as jsxs53 } from "react/jsx-runtime";
-import { useCallback as useCallback72, useEffect as useEffect102, useMemo as useMemo62, useRef as useRef82, useState as useState92 } from "react";
+import { useCallback as useCallback62, useEffect as useEffect102, useMemo as useMemo62, useRef as useRef72, useState as useState92 } from "react";
 import { jsx as jsx104, jsxs as jsxs62 } from "react/jsx-runtime";
 import { useMemo as useMemo72 } from "react";
 import { jsxs as jsxs72 } from "react/jsx-runtime";
 import { useMemo as useMemo82 } from "react";
 import { jsx as jsx113, jsxs as jsxs82, Fragment as Fragment23 } from "react/jsx-runtime";
-import { useCallback as useCallback102, useMemo as useMemo112 } from "react";
-import { useCallback as useCallback92, useMemo as useMemo102, useRef as useRef102 } from "react";
+import { useCallback as useCallback92, useMemo as useMemo112 } from "react";
+import { useCallback as useCallback82, useMemo as useMemo102, useRef as useRef92 } from "react";
 import { jsx as jsx123, jsxs as jsxs92, Fragment as Fragment32 } from "react/jsx-runtime";
-import { useCallback as useCallback122, useMemo as useMemo132, useState as useState122 } from "react";
+import { useCallback as useCallback112, useMemo as useMemo132, useState as useState122 } from "react";
 import { jsx as jsx133 } from "react/jsx-runtime";
 
 // ../core/dist/esm/no-react.mjs
@@ -24862,6 +25035,36 @@ var DELAY_RENDER_CALLSTACK_TOKEN2 = "The delayRender was called:";
 var DELAY_RENDER_RETRIES_LEFT2 = "Retries left: ";
 var DELAY_RENDER_RETRY_TOKEN2 = "- Rendering the frame will be retried.";
 var DELAY_RENDER_CLEAR_TOKEN2 = "handle was cleared after";
+var findPropsToDelete2 = ({
+  schema,
+  key,
+  value
+}) => {
+  const fieldSchema = schema[key];
+  if (!fieldSchema) {
+    throw new Error("Key " + JSON.stringify(key) + " not found in schema");
+  }
+  if (typeof value !== "string") {
+    throw new Error("Value must be a string, but is " + JSON.stringify(value));
+  }
+  if (fieldSchema.type !== "enum") {
+    throw new Error("Key " + JSON.stringify(key) + " is not an enum");
+  }
+  const currentVariant = fieldSchema.variants[value];
+  if (!currentVariant) {
+    throw new Error("Value for " + JSON.stringify(key) + " must be one of " + Object.keys(fieldSchema.variants).map((v) => JSON.stringify(v)).join(", ") + ", got " + JSON.stringify(value));
+  }
+  const otherVariants = Object.keys(fieldSchema.variants).filter((v) => v !== value);
+  const otherKeys = new Set;
+  for (const variant of otherVariants) {
+    const otherVariant = fieldSchema.variants[variant];
+    const keys = Object.keys(otherVariant);
+    for (const k of keys) {
+      otherKeys.add(k);
+    }
+  }
+  return [...otherKeys];
+};
 var DATE_TOKEN2 = "remotion-date:";
 var FILE_TOKEN2 = "remotion-file:";
 var serializeJSONWithSpecialTypes2 = ({
@@ -25529,7 +25732,8 @@ var NoReactInternals = {
   DATE_TOKEN: DATE_TOKEN2,
   FILE_TOKEN: FILE_TOKEN2,
   validateCodec: validateCodec2,
-  proResProfileOptions
+  proResProfileOptions,
+  findPropsToDelete: findPropsToDelete2
 };
 
 // ../player/dist/esm/index.mjs
@@ -25539,16 +25743,16 @@ import {
   useImperativeHandle as useImperativeHandle42,
   useLayoutEffect as useLayoutEffect42,
   useMemo as useMemo172,
-  useRef as useRef142,
+  useRef as useRef132,
   useState as useState142
 } from "react";
 import React133, {
   forwardRef as forwardRef34,
   Suspense as Suspense22,
-  useCallback as useCallback132,
+  useCallback as useCallback122,
   useImperativeHandle as useImperativeHandle32,
   useMemo as useMemo162,
-  useRef as useRef132
+  useRef as useRef122
 } from "react";
 import { useContext as useContext62, useMemo as useMemo152 } from "react";
 import { jsx as jsx153 } from "react/jsx-runtime";
@@ -25986,7 +26190,7 @@ class ThumbnailEmitter {
   };
 }
 var useBufferStateEmitter = (emitter) => {
-  const bufferManager = useContext44(Internals.BufferingContextReact);
+  const bufferManager = useContext43(Internals.BufferingContextReact);
   if (!bufferManager) {
     throw new Error("BufferingContextReact not found");
   }
@@ -26066,36 +26270,36 @@ var usePlayer = () => {
   const [playing, setPlaying, imperativePlaying] = Internals.Timeline.usePlayingState();
   const [hasPlayed, setHasPlayed] = useState310(false);
   const frame = Internals.Timeline.useTimelinePosition();
-  const playStart = useRef26(frame);
+  const playStart = useRef43(frame);
   const setFrame = Internals.Timeline.useTimelineSetFrame();
   const setTimelinePosition = Internals.Timeline.useTimelineSetFrame();
-  const audioContext = useContext39(Internals.SharedAudioContext);
-  const audioTagsContext = useContext39(Internals.SharedAudioTagsContext);
+  const audioContext = useContext38(Internals.SharedAudioContext);
+  const audioTagsContext = useContext38(Internals.SharedAudioTagsContext);
   const { audioAndVideoTags } = Internals.useTimelineContext();
-  const frameRef = useRef26(frame);
+  const frameRef = useRef43(frame);
   frameRef.current = frame;
   const video = Internals.useVideo();
   const config = Internals.useUnsafeVideoConfig();
-  const emitter = useContext39(PlayerEventEmitterContext);
+  const emitter = useContext38(PlayerEventEmitterContext);
   const lastFrame = (config?.durationInFrames ?? 1) - 1;
   const isLastFrame = frame === lastFrame;
   const isFirstFrame = frame === 0;
   if (!emitter) {
     throw new TypeError("Expected Player event emitter context");
   }
-  const bufferingContext = useContext39(Internals.BufferingContextReact);
+  const bufferingContext = useContext38(Internals.BufferingContextReact);
   if (!bufferingContext) {
     throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
   }
   const { buffering } = bufferingContext;
-  const seek2 = useCallback24((newFrame) => {
+  const seek2 = useCallback34((newFrame) => {
     if (video?.id) {
       setTimelinePosition((c) => ({ ...c, [video.id]: newFrame }));
     }
     frameRef.current = newFrame;
     emitter.dispatchSeek(newFrame);
   }, [emitter, setTimelinePosition, video?.id]);
-  const play = useCallback24((e) => {
+  const play = useCallback34((e) => {
     if (imperativePlaying.current) {
       return;
     }
@@ -26122,7 +26326,7 @@ var usePlayer = () => {
     seek2,
     audioAndVideoTags
   ]);
-  const pause = useCallback24(() => {
+  const pause = useCallback34(() => {
     if (imperativePlaying.current) {
       imperativePlaying.current = false;
       setPlaying(false);
@@ -26130,7 +26334,7 @@ var usePlayer = () => {
       audioContext?.suspend();
     }
   }, [emitter, imperativePlaying, setPlaying, audioContext]);
-  const pauseAndReturnToPlayStart = useCallback24(() => {
+  const pauseAndReturnToPlayStart = useCallback34(() => {
     if (imperativePlaying.current) {
       imperativePlaying.current = false;
       frameRef.current = playStart.current;
@@ -26145,7 +26349,7 @@ var usePlayer = () => {
     }
   }, [config, emitter, imperativePlaying, setPlaying, setTimelinePosition]);
   const videoId = video?.id;
-  const frameBack = useCallback24((frames) => {
+  const frameBack = useCallback34((frames) => {
     if (!videoId) {
       return null;
     }
@@ -26164,7 +26368,7 @@ var usePlayer = () => {
       };
     });
   }, [imperativePlaying, setFrame, videoId]);
-  const frameForward = useCallback24((frames) => {
+  const frameForward = useCallback34((frames) => {
     if (!videoId) {
       return null;
     }
@@ -26183,20 +26387,20 @@ var usePlayer = () => {
       };
     });
   }, [videoId, imperativePlaying, lastFrame, setFrame]);
-  const toggle = useCallback24((e) => {
+  const toggle = useCallback34((e) => {
     if (imperativePlaying.current) {
       pause();
     } else {
       play(e);
     }
   }, [imperativePlaying, pause, play]);
-  const isPlaying = useCallback24(() => {
+  const isPlaying = useCallback34(() => {
     return imperativePlaying.current;
   }, [imperativePlaying]);
-  const getCurrentFrame = useCallback24(() => {
+  const getCurrentFrame = useCallback34(() => {
     return frameRef.current;
   }, [frameRef]);
-  const isBuffering = useCallback24(() => {
+  const isBuffering = useCallback34(() => {
     return buffering.current;
   }, [buffering]);
   const returnValue = useMemo51(() => {
@@ -26242,7 +26446,7 @@ var useBrowserMediaSession = ({
   playbackRate
 }) => {
   const { playing, pause, play, emitter, getCurrentFrame, seek: seek2 } = usePlayer();
-  const hasEverPlayed = useRef310(false);
+  const hasEverPlayed = useRef26(false);
   useEffect310(() => {
     if (playing) {
       hasEverPlayed.current = true;
@@ -26384,7 +26588,7 @@ var getIsBackgrounded = () => {
   return document.visibilityState === "hidden";
 };
 var useIsBackgrounded = () => {
-  const isBackgrounded = useRef43(getIsBackgrounded());
+  const isBackgrounded = useRef310(getIsBackgrounded());
   useEffect43(() => {
     const onVisibilityChange = () => {
       isBackgrounded.current = getIsBackgrounded();
@@ -26402,17 +26606,18 @@ var setGlobalTimeAnchor = ({
   audioSyncAnchor,
   absoluteTimeInSeconds,
   globalPlaybackRate,
-  logLevel
+  logLevel,
+  force
 }) => {
   const newAnchor = audioContext.currentTime - absoluteTimeInSeconds / globalPlaybackRate;
   const shift4 = (newAnchor - audioSyncAnchor.value) * globalPlaybackRate;
   const { outputLatency } = audioContext;
   const safeOutputLatency = outputLatency === 0 ? 0.3 : outputLatency;
   const latency = audioContext.baseLatency + safeOutputLatency;
-  if (Math.abs(shift4) < ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT + latency) {
+  if (Math.abs(shift4) < ALLOWED_GLOBAL_TIME_ANCHOR_SHIFT + latency && !force) {
     return false;
   }
-  Internals.Log.verbose({ logLevel, tag: "audio-scheduling" }, "Anchor changed from %s to %s with shift %s", audioSyncAnchor.value, newAnchor, shift4);
+  Internals.Log.verbose({ logLevel, tag: "audio-scheduling" }, "Anchor " + (force ? "forcibly " : "") + "changed from %s to %s with shift %s", audioSyncAnchor.value, newAnchor, shift4);
   audioSyncAnchor.value = newAnchor;
   return true;
 };
@@ -26430,11 +26635,11 @@ var usePlayback = ({
   const frame = Internals.Timeline.useTimelinePosition();
   const { playing, pause, emitter, isPlaying } = usePlayer();
   const setFrame = Internals.Timeline.useTimelineSetFrame();
-  const sharedAudioContext = useContext45(Internals.SharedAudioContext);
+  const sharedAudioContext = useContext44(Internals.SharedAudioContext);
   const logLevel = Internals.useLogLevel();
   const isBackgroundedRef = useIsBackgrounded();
-  const lastTimeUpdateTimestamp = useRef52(0);
-  const context = useContext45(Internals.BufferingContextReact);
+  const lastTimeUpdateTimestamp = useRef42(0);
+  const context = useContext44(Internals.BufferingContextReact);
   if (!context) {
     throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
   }
@@ -26453,17 +26658,56 @@ var usePlayback = ({
     if (!config) {
       return;
     }
+    if (muted) {
+      return;
+    }
     const changed = setGlobalTimeAnchor({
       audioContext: sharedAudioContext.audioContext,
       audioSyncAnchor: sharedAudioContext.audioSyncAnchor,
       absoluteTimeInSeconds: frame / config.fps,
       globalPlaybackRate: playbackRate,
-      logLevel
+      logLevel,
+      force: false
     });
     if (changed) {
       sharedAudioContext.audioSyncAnchorEmitter.dispatch("changed");
     }
-  }, [config, frame, logLevel, playbackRate, sharedAudioContext]);
+  }, [config, frame, logLevel, playbackRate, sharedAudioContext, muted]);
+  useLayoutEffect23(() => {
+    const audioContext = sharedAudioContext?.audioContext;
+    if (!audioContext) {
+      return;
+    }
+    if (!config) {
+      return;
+    }
+    if (muted) {
+      return;
+    }
+    const callback = () => {
+      if (audioContext.state !== "running") {
+        setGlobalTimeAnchor({
+          audioContext,
+          audioSyncAnchor: sharedAudioContext.audioSyncAnchor,
+          absoluteTimeInSeconds: getCurrentFrame() / config.fps,
+          globalPlaybackRate: playbackRate,
+          logLevel,
+          force: true
+        });
+      }
+    };
+    audioContext?.addEventListener("statechange", callback);
+    return () => {
+      audioContext?.removeEventListener("statechange", callback);
+    };
+  }, [
+    config,
+    getCurrentFrame,
+    logLevel,
+    muted,
+    playbackRate,
+    sharedAudioContext
+  ]);
   useEffect52(() => {
     if (!config) {
       return;
@@ -26497,7 +26741,7 @@ var usePlayback = ({
         sharedAudioContext?.suspend?.();
         return;
       }
-      if (!muted) {
+      if (!muted && !context.buffering.current) {
         sharedAudioContext?.resume?.();
       }
       const time = performance.now() - startedTime;
@@ -26515,7 +26759,7 @@ var usePlayback = ({
         shouldLoop: loop
       });
       framesAdvanced += framesToAdvance;
-      if (nextFrame !== getCurrentFrame() && (!hasEnded || moveToBeginningWhenEnded)) {
+      if (nextFrame !== getCurrentFrame() && (!hasEnded || moveToBeginningWhenEnded) && !context.buffering.current) {
         setFrame((c) => ({ ...c, [config.id]: nextFrame }));
       }
       if (hasEnded) {
@@ -26530,27 +26774,16 @@ var usePlayback = ({
       const getIsResumingAudioContext = sharedAudioContext?.getIsResumingAudioContext?.() ?? null;
       if (getIsResumingAudioContext !== null && !muted) {
         getIsResumingAudioContext.then(() => {
-          if (!sharedAudioContext?.audioContext) {
-            return;
-          }
-          if (!sharedAudioContext.audioSyncAnchor) {
-            return;
-          }
-          setGlobalTimeAnchor({
-            audioContext: sharedAudioContext.audioContext,
-            audioSyncAnchor: sharedAudioContext.audioSyncAnchor,
-            absoluteTimeInSeconds: getCurrentFrame() / config.fps,
-            globalPlaybackRate: playbackRate,
-            logLevel
-          });
           startedTime = performance.now();
           framesAdvanced = 0;
           queueNextFrame();
         });
         return;
       }
-      if (context.buffering.current && !muted) {
-        sharedAudioContext?.suspend?.();
+      if (context.buffering.current) {
+        if (!muted) {
+          sharedAudioContext?.suspend?.();
+        }
         const stopListening = context.listenForResume(() => {
           stopListening.remove();
           startedTime = performance.now();
@@ -26672,7 +26905,7 @@ var useElementSize = (ref, options2) => {
       });
     });
   }, [options2.shouldApplyCssTransforms]);
-  const updateSize = useCallback35(() => {
+  const updateSize = useCallback24(() => {
     if (!ref.current) {
       return;
     }
@@ -26893,7 +27126,7 @@ var DefaultVolumeSlider = ({
   }, [isVertical]);
   const randomId = typeof React54.useId === "undefined" ? "volume-slider" : React54.useId();
   const [randomClass] = useState52(() => `__remotion-volume-slider-${random(randomId)}`.replace(".", ""));
-  const onVolumeChange = useCallback42((e) => {
+  const onVolumeChange = useCallback35((e) => {
     setVolume(parseFloat(e.target.value));
   }, [setVolume]);
   const inputStyle = useMemo39(() => {
@@ -26970,10 +27203,10 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
   const [mediaMuted, setMediaMuted] = Internals.useMediaMutedState();
   const [mediaVolume, setMediaVolume] = Internals.useMediaVolumeState();
   const [focused, setFocused] = useState62(false);
-  const parentDivRef = useRef62(null);
-  const inputRef = useRef62(null);
+  const parentDivRef = useRef52(null);
+  const inputRef = useRef52(null);
   const hover = useHoverState(parentDivRef, false);
-  const onBlur = useCallback52(() => {
+  const onBlur = useCallback42(() => {
     setTimeout(() => {
       if (inputRef.current && document.activeElement !== inputRef.current) {
         setFocused(false);
@@ -26981,7 +27214,7 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
     }, 10);
   }, []);
   const isVolume0 = mediaVolume === 0;
-  const onClick = useCallback52(() => {
+  const onClick = useCallback42(() => {
     if (isVolume0) {
       setMediaVolume(1);
       setMediaMuted(false);
@@ -27012,7 +27245,7 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
       padding: 0
     };
   }, []);
-  const renderDefaultMuteButton = useCallback52(({ muted, volume }) => {
+  const renderDefaultMuteButton = useCallback42(({ muted, volume }) => {
     const isMutedOrZero = muted || volume === 0;
     return /* @__PURE__ */ jsx84("button", {
       "aria-label": isMutedOrZero ? "Unmute sound" : "Mute sound",
@@ -27056,7 +27289,7 @@ var MediaVolumeSlider = ({ displayVerticalVolumeSlider, renderMuteButton, render
 };
 function useComponentVisible(initialIsVisible) {
   const [isComponentVisible, setIsComponentVisible] = useState72(initialIsVisible);
-  const ref = useRef72(null);
+  const ref = useRef62(null);
   useEffect83(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target)) {
@@ -27103,16 +27336,16 @@ var formatPlaybackRate = (rate) => {
   return str.includes(".") ? str : str + ".0";
 };
 var PlaybackrateOption = ({ rate, onSelect, selectedRate, keyboardSelectedRate }) => {
-  const onClick = useCallback62((e) => {
+  const onClick = useCallback52((e) => {
     e.stopPropagation();
     e.preventDefault();
     onSelect(rate);
   }, [onSelect, rate]);
   const [hovered, setHovered] = useState82(false);
-  const onMouseEnter = useCallback62(() => {
+  const onMouseEnter = useCallback52(() => {
     setHovered(true);
   }, []);
-  const onMouseLeave = useCallback62(() => {
+  const onMouseLeave = useCallback52(() => {
     setHovered(false);
   }, []);
   const isFocused = keyboardSelectedRate === rate;
@@ -27179,7 +27412,7 @@ var PlaybackPopup = ({ setIsComponentVisible, playbackRates, canvasSize }) => {
     setPlaybackRate,
     setIsComponentVisible
   ]);
-  const onSelect = useCallback62((rate) => {
+  const onSelect = useCallback52((rate) => {
     setPlaybackRate(rate);
     setIsComponentVisible(false);
   }, [setIsComponentVisible, setPlaybackRate]);
@@ -27242,7 +27475,7 @@ var button = {
 var PlaybackrateControl = ({ playbackRates, canvasSize }) => {
   const { ref, isComponentVisible, setIsComponentVisible } = useComponentVisible(false);
   const { playbackRate } = Internals.usePlaybackRate();
-  const onClick = useCallback62((e) => {
+  const onClick = useCallback52((e) => {
     e.stopPropagation();
     e.preventDefault();
     setIsComponentVisible((prevIsComponentVisible) => !prevIsComponentVisible);
@@ -27306,7 +27539,7 @@ var findBodyInWhichDivIsLocated = (div) => {
   return current;
 };
 var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFrame }) => {
-  const containerRef = useRef82(null);
+  const containerRef = useRef72(null);
   const barHovered = useHoverState(containerRef, false);
   const size4 = useElementSize(containerRef, {
     triggerOnWindowResize: true,
@@ -27318,7 +27551,7 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
     dragging: false
   });
   const width = size4?.width ?? 0;
-  const onPointerDown = useCallback72((e) => {
+  const onPointerDown = useCallback62((e) => {
     if (e.button !== 0) {
       return;
     }
@@ -27332,7 +27565,7 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
     });
     onSeekStart();
   }, [durationInFrames, width, pause, seek2, playing, onSeekStart]);
-  const onPointerMove = useCallback72((e) => {
+  const onPointerMove = useCallback62((e) => {
     if (!size4) {
       throw new Error("Player has no size");
     }
@@ -27343,7 +27576,7 @@ var PlayerSeekBar = ({ durationInFrames, onSeekEnd, onSeekStart, inFrame, outFra
     const _frame = getFrameFromX(e.clientX - posLeft, durationInFrames, size4.width);
     seek2(_frame);
   }, [dragging.dragging, durationInFrames, seek2, size4]);
-  const onPointerUp = useCallback72(() => {
+  const onPointerUp = useCallback62(() => {
     setDragging({
       dragging: false
     });
@@ -27583,7 +27816,7 @@ var Controls = ({
   toggle,
   renderCustomControls
 }) => {
-  const playButtonRef = useRef92(null);
+  const playButtonRef = useRef82(null);
   const [supportsFullscreen, setSupportsFullscreen] = useState102(false);
   const hovered = useHoverState(containerRef, hideControlsWhenPointerDoesntMove);
   const { maxTimeLabelWidth, displayVerticalVolumeSlider } = useVideoControlsResize({
@@ -27658,14 +27891,14 @@ var Controls = ({
     return null;
   }, [showPlaybackRateControl]);
   const customControlsElement = renderCustomControls ? renderCustomControls() : null;
-  const ref = useRef92(null);
-  const flexRef = useRef92(null);
-  const onPointerDownIfContainer = useCallback82((e) => {
+  const ref = useRef82(null);
+  const flexRef = useRef82(null);
+  const onPointerDownIfContainer = useCallback72((e) => {
     if (e.target === ref.current || e.target === flexRef.current) {
       onPointerDown?.(e);
     }
   }, [onPointerDown]);
-  const onDoubleClickIfContainer = useCallback82((e) => {
+  const onDoubleClickIfContainer = useCallback72((e) => {
     if (e.target === ref.current || e.target === flexRef.current) {
       onDoubleClick?.(e);
     }
@@ -27791,14 +28024,14 @@ var cancellablePromise = (promise) => {
 };
 var delay = (n) => new Promise((resolve) => setTimeout(resolve, n));
 var useCancellablePromises = () => {
-  const pendingPromises = useRef102([]);
-  const appendPendingPromise = useCallback92((promise) => {
+  const pendingPromises = useRef92([]);
+  const appendPendingPromise = useCallback82((promise) => {
     pendingPromises.current = [...pendingPromises.current, promise];
   }, []);
-  const removePendingPromise = useCallback92((promise) => {
+  const removePendingPromise = useCallback82((promise) => {
     pendingPromises.current = pendingPromises.current.filter((p) => p !== promise);
   }, []);
-  const clearPendingPromises = useCallback92(() => pendingPromises.current.map((p) => p.cancel()), []);
+  const clearPendingPromises = useCallback82(() => pendingPromises.current.map((p) => p.cancel()), []);
   const api = useMemo102(() => ({
     appendPendingPromise,
     removePendingPromise,
@@ -27808,7 +28041,7 @@ var useCancellablePromises = () => {
 };
 var useClickPreventionOnDoubleClick = (onClick, onDoubleClick, doubleClickToFullscreen) => {
   const api = useCancellablePromises();
-  const handleClick = useCallback102(async (e) => {
+  const handleClick = useCallback92(async (e) => {
     if (e instanceof PointerEvent ? e.pointerType === "touch" : e.nativeEvent.pointerType === "touch") {
       onClick(e);
       return;
@@ -27828,14 +28061,14 @@ var useClickPreventionOnDoubleClick = (onClick, onDoubleClick, doubleClickToFull
       }
     }
   }, [api, onClick]);
-  const handlePointerDown = useCallback102(() => {
+  const handlePointerDown = useCallback92(() => {
     document.addEventListener("pointerup", (newEvt) => {
       handleClick(newEvt);
     }, {
       once: true
     });
   }, [handleClick]);
-  const handleDoubleClick = useCallback102(() => {
+  const handleDoubleClick = useCallback92(() => {
     api.clearPendingPromises();
     onDoubleClick();
   }, [api, onDoubleClick]);
@@ -27896,7 +28129,7 @@ var PlayerUI = ({
 }, ref) => {
   const config = Internals.useUnsafeVideoConfig();
   const video = Internals.useVideo();
-  const container4 = useRef112(null);
+  const container4 = useRef102(null);
   const canvasSize = useElementSize(container4, {
     triggerOnWindowResize: false,
     shouldApplyCssTransforms: false
@@ -27955,10 +28188,10 @@ var PlayerUI = ({
       document.removeEventListener("webkitfullscreenchange", onFullscreenChange);
     };
   }, []);
-  const toggle = useCallback112((e) => {
+  const toggle = useCallback102((e) => {
     playerToggle(e);
   }, [playerToggle]);
-  const requestFullscreen = useCallback112(() => {
+  const requestFullscreen = useCallback102(() => {
     if (!allowFullscreen) {
       throw new Error("allowFullscreen is false");
     }
@@ -27974,7 +28207,7 @@ var PlayerUI = ({
       container4.current.requestFullscreen();
     }
   }, [allowFullscreen, supportsFullScreen]);
-  const exitFullscreen = useCallback112(() => {
+  const exitFullscreen = useCallback102(() => {
     if (document.webkitExitFullscreen) {
       document.webkitExitFullscreen();
     } else {
@@ -28018,7 +28251,7 @@ var PlayerUI = ({
     });
   }, [canvasSize, config]);
   const scale = layout?.scale ?? 1;
-  const initialScaleIgnored = useRef112(false);
+  const initialScaleIgnored = useRef102(false);
   useEffect122(() => {
     if (!initialScaleIgnored.current) {
       initialScaleIgnored.current = true;
@@ -28167,32 +28400,32 @@ var PlayerUI = ({
   }, [config, layout, overflowVisible, scale]);
   const playerPause = player.pause;
   const playerDispatchError = player.emitter.dispatchError;
-  const onError = useCallback112((error2) => {
+  const onError = useCallback102((error2) => {
     playerPause();
     playerDispatchError(error2);
   }, [playerDispatchError, playerPause]);
-  const onFullscreenButtonClick = useCallback112((e) => {
+  const onFullscreenButtonClick = useCallback102((e) => {
     e.stopPropagation();
     requestFullscreen();
   }, [requestFullscreen]);
-  const onExitFullscreenButtonClick = useCallback112((e) => {
+  const onExitFullscreenButtonClick = useCallback102((e) => {
     e.stopPropagation();
     exitFullscreen();
   }, [exitFullscreen]);
-  const onSingleClick = useCallback112((e) => {
+  const onSingleClick = useCallback102((e) => {
     const rightClick = e instanceof MouseEvent ? e.button === 2 : e.nativeEvent.button;
     if (rightClick) {
       return;
     }
     toggle(e);
   }, [toggle]);
-  const onSeekStart = useCallback112(() => {
+  const onSeekStart = useCallback102(() => {
     setSeeking(true);
   }, []);
-  const onSeekEnd = useCallback112(() => {
+  const onSeekEnd = useCallback102(() => {
     setSeeking(false);
   }, []);
-  const onDoubleClick = useCallback112(() => {
+  const onDoubleClick = useCallback102(() => {
     if (isFullscreen) {
       exitFullscreen();
     } else {
@@ -28425,7 +28658,7 @@ var SharedPlayerContexts = ({
       mediaVolume
     };
   }, [mediaMuted, mediaVolume]);
-  const setMediaVolumeAndPersist = useCallback122((vol) => {
+  const setMediaVolumeAndPersist = useCallback112((vol) => {
     setMediaVolume(vol);
     if (persistVolumeToStorage) {
       persistVolume(vol, logLevel, volumePersistenceKey ?? null);
@@ -28676,9 +28909,9 @@ var PlayerFn = ({
   }));
   const [playing, setPlaying] = useState132(false);
   const [rootId] = useState132("player-comp");
-  const rootRef = useRef122(null);
-  const audioAndVideoTags = useRef122([]);
-  const imperativePlaying = useRef122(false);
+  const rootRef = useRef112(null);
+  const audioAndVideoTags = useRef112([]);
+  const imperativePlaying = useRef112(false);
   const [currentPlaybackRate, setCurrentPlaybackRate] = useState132(playbackRate);
   if (typeof compositionHeight !== "number") {
     throw new TypeError(`'compositionHeight' must be a number but got '${typeof compositionHeight}' instead`);
@@ -28875,7 +29108,7 @@ var ThumbnailUI = ({
 }, ref) => {
   const config = Internals.useUnsafeVideoConfig();
   const video = Internals.useVideo();
-  const container4 = useRef132(null);
+  const container4 = useRef122(null);
   const canvasSize = useElementSize(container4, {
     triggerOnWindowResize: false,
     shouldApplyCssTransforms: false
@@ -28922,7 +29155,7 @@ var ThumbnailUI = ({
       overflowVisible
     });
   }, [config, layout, overflowVisible, scale]);
-  const onError = useCallback132((error2) => {
+  const onError = useCallback122((error2) => {
     thumbnail.emitter.dispatchError(error2);
   }, [thumbnail.emitter]);
   const loadingMarkup = useMemo162(() => {
@@ -29001,7 +29234,7 @@ var ThumbnailFn = ({
     }, []);
   }
   const [thumbnailId] = useState142(() => String(random(null)));
-  const rootRef = useRef142(null);
+  const rootRef = useRef132(null);
   const timelineState = useMemo172(() => {
     const value = {
       playing: false,
@@ -29824,7 +30057,7 @@ var UNDERLAY_RED = curriedTransparentize$1(0.9, RED);
 var BLUE_TEXT = curriedDarken$1(0.3, "#42e9f5");
 
 // src/components/homepage/layout/use-color-mode.tsx
-import React57, { useContext as useContext46, useMemo as useMemo53 } from "react";
+import React57, { useContext as useContext45, useMemo as useMemo53 } from "react";
 import { jsx as jsx57 } from "react/jsx-runtime";
 var Context = React57.createContext(undefined);
 var ColorModeProvider = ({
@@ -29841,7 +30074,7 @@ var ColorModeProvider = ({
   });
 };
 function useColorMode() {
-  const context = useContext46(Context);
+  const context = useContext45(Context);
   if (context === null || context === undefined) {
     throw new Error("ColorModeProvider");
   }
@@ -29851,13 +30084,13 @@ function useColorMode() {
 // ../media/dist/esm/index.mjs
 import { useState as useState312 } from "react";
 import { useMemo as useMemo311 } from "react";
-import { useContext as useContext212, useEffect as useEffect44, useMemo as useMemo55, useRef as useRef44, useState as useState41 } from "react";
+import { useContext as useContext212, useEffect as useEffect44, useMemo as useMemo55, useRef as useRef45, useState as useState41 } from "react";
 import { ALL_FORMATS, Input as Input2, UrlSource } from "mediabunny";
 import { AudioBufferSink, InputDisposedError } from "mediabunny";
 import { CanvasSink } from "mediabunny";
-import { useContext as useContext48, useLayoutEffect as useLayoutEffect18 } from "react";
+import { useContext as useContext47, useLayoutEffect as useLayoutEffect18 } from "react";
 import { jsx as jsx58 } from "react/jsx-runtime";
-import { useContext as useContext311, useLayoutEffect as useLayoutEffect24, useMemo as useMemo213, useState as useState210 } from "react";
+import { useContext as useContext310, useLayoutEffect as useLayoutEffect24, useMemo as useMemo213, useState as useState210 } from "react";
 import React211 from "react";
 import {
   ALL_FORMATS as ALL_FORMATS2,
@@ -29873,7 +30106,7 @@ import { jsx as jsx216 } from "react/jsx-runtime";
 import { jsx as jsx315 } from "react/jsx-runtime";
 import { useMemo as useMemo63, useState as useState63 } from "react";
 import {
-  useContext as useContext47,
+  useContext as useContext46,
   useEffect as useEffect210,
   useLayoutEffect as useLayoutEffect34,
   useMemo as useMemo412,
@@ -30295,6 +30528,12 @@ var audioIteratorManager = ({
   let audioIteratorsCreated = 0;
   let totalAudioScheduledInSeconds = 0;
   let currentDelayHandle = null;
+  const unblockCurrentDelayHandle = () => {
+    if (currentDelayHandle) {
+      currentDelayHandle.unblock();
+      currentDelayHandle = null;
+    }
+  };
   const pendingScheduleWaiters = [];
   const notifyNodeScheduled = () => {
     for (let i = pendingScheduleWaiters.length - 1;i >= 0; i--) {
@@ -30395,6 +30634,7 @@ var audioIteratorManager = ({
     waitForTurn({
       getPriority: () => {
         if (iterator.isDestroyed()) {
+          onDestroyed();
           return null;
         }
         const guessedNextTimestamp = iterator.guessNextTimestamp();
@@ -30447,9 +30687,11 @@ var audioIteratorManager = ({
       },
       onError: (e) => {
         if (e instanceof InputDisposedError) {
+          onDestroyed();
           return;
         }
         if (e instanceof StaleWaiterError) {
+          onDestroyed();
           return;
         }
         throw e;
@@ -30475,6 +30717,7 @@ var audioIteratorManager = ({
       return;
     }
     audioBufferIterator?.destroy();
+    unblockCurrentDelayHandle();
     const delayHandle = delayPlaybackHandleIfNotPremounting();
     currentDelayHandle = delayHandle;
     const iterator = makeAudioIterator({
@@ -30489,6 +30732,7 @@ var audioIteratorManager = ({
     });
     audioIteratorsCreated++;
     audioBufferIterator = iterator;
+    let chunksScheduled = 0;
     proceedScheduling({
       iterator,
       nonce,
@@ -30496,7 +30740,10 @@ var audioIteratorManager = ({
       playbackRate,
       scheduleAudioNode,
       onScheduled: () => {
-        delayHandle.unblock();
+        chunksScheduled++;
+        if (chunksScheduled === 6) {
+          delayHandle.unblock();
+        }
       },
       onDestroyed: () => {
         delayHandle.unblock();
@@ -30524,6 +30771,9 @@ var audioIteratorManager = ({
     fps,
     getAudioContextCurrentTimeMockedInTest
   }) => {
+    if (nonce.isStale()) {
+      return;
+    }
     if (currentSeek.time === newTime && currentSeek.playbackRate === playbackRate && currentSeek.trimBefore === trimBefore && currentSeek.trimAfter === trimAfter && currentSeek.sequenceOffset === sequenceOffset && currentSeek.sequenceDurationInFrames === sequenceDurationInFrames && currentSeek.loop === loop && currentSeek.fps === fps) {
       return;
     }
@@ -30575,10 +30825,7 @@ var audioIteratorManager = ({
     destroyIterator: () => {
       audioBufferIterator?.destroy();
       audioBufferIterator = null;
-      if (currentDelayHandle) {
-        currentDelayHandle.unblock();
-        currentDelayHandle = null;
-      }
+      unblockCurrentDelayHandle();
     },
     seek: seek2,
     getAudioIteratorsCreated: () => audioIteratorsCreated,
@@ -31626,7 +31873,7 @@ var useCommonEffects = ({
   logLevel,
   label: label3
 }) => {
-  const sharedAudioContext = useContext48(Internals.SharedAudioContext);
+  const sharedAudioContext = useContext47(Internals.SharedAudioContext);
   useLayoutEffect18(() => {
     const mediaPlayer = mediaPlayerRef.current;
     if (!mediaPlayer)
@@ -31782,9 +32029,9 @@ var AudioForPreviewAssertedShowing = ({
 }) => {
   const videoConfig = useUnsafeVideoConfig2();
   const frame = useCurrentFrame();
-  const mediaPlayerRef = useRef44(null);
-  const initialTrimBeforeRef = useRef44(trimBefore);
-  const initialTrimAfterRef = useRef44(trimAfter);
+  const mediaPlayerRef = useRef45(null);
+  const initialTrimBeforeRef = useRef45(trimBefore);
+  const initialTrimAfterRef = useRef45(trimAfter);
   const [mediaPlayerReady, setMediaPlayerReady] = useState41(false);
   const [shouldFallbackToNativeAudio, setShouldFallbackToNativeAudio] = useState41(false);
   const [playing] = Timeline.usePlayingState();
@@ -31807,7 +32054,7 @@ var AudioForPreviewAssertedShowing = ({
     throw new TypeError("No `src` was passed to <NewAudioForPreview>.");
   }
   const currentTime = frame / videoConfig.fps;
-  const currentTimeRef = useRef44(currentTime);
+  const currentTimeRef = useRef45(currentTime);
   currentTimeRef.current = currentTime;
   const preloadedSrc = usePreload2(src);
   const parentSequence = useContext212(SequenceContext2);
@@ -31820,14 +32067,14 @@ var AudioForPreviewAssertedShowing = ({
   }
   const effectiveMuted = muted || mediaMuted || userPreferredVolume <= 0;
   const isPlayerBuffering = Internals.useIsPlayerBuffering(bufferingContext);
-  const initialPlaying = useRef44(playing && !isPlayerBuffering);
-  const initialIsPremounting = useRef44(isPremounting);
-  const initialIsPostmounting = useRef44(isPostmounting);
-  const initialGlobalPlaybackRate = useRef44(globalPlaybackRate);
-  const initialPlaybackRate = useRef44(playbackRate);
-  const initialMuted = useRef44(effectiveMuted);
-  const initialDurationInFrames = useRef44(videoConfig.durationInFrames);
-  const initialSequenceOffset = useRef44(sequenceOffset);
+  const initialPlaying = useRef45(playing && !isPlayerBuffering);
+  const initialIsPremounting = useRef45(isPremounting);
+  const initialIsPostmounting = useRef45(isPostmounting);
+  const initialGlobalPlaybackRate = useRef45(globalPlaybackRate);
+  const initialPlaybackRate = useRef45(playbackRate);
+  const initialMuted = useRef45(effectiveMuted);
+  const initialDurationInFrames = useRef45(videoConfig.durationInFrames);
+  const initialSequenceOffset = useRef45(sequenceOffset);
   useCommonEffects({
     mediaPlayerRef,
     mediaPlayerReady,
@@ -33902,7 +34149,7 @@ var AudioForRendering2 = ({
   const frame = useCurrentFrame();
   const absoluteFrame = Internals.useTimelinePosition();
   const videoConfig = Internals.useUnsafeVideoConfig();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext311(Internals.RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext310(Internals.RenderAssetManager);
   const startsAt = Internals.useMediaStartsAt();
   const environment = useRemotionEnvironment();
   if (!videoConfig) {
@@ -33914,7 +34161,7 @@ var AudioForRendering2 = ({
   const { fps } = videoConfig;
   const { delayRender: delayRender2, continueRender } = useDelayRender();
   const [replaceWithHtml5Audio, setReplaceWithHtml5Audio] = useState210(false);
-  const sequenceContext = useContext311(Internals.SequenceContext);
+  const sequenceContext = useContext310(Internals.SequenceContext);
   const id = useMemo213(() => `media-audio-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
     sequenceContext?.cumulatedFrom,
@@ -34267,7 +34514,7 @@ var VideoForPreviewAssertedShowing = ({
   const [shouldFallbackToNativeVideo, setShouldFallbackToNativeVideo] = useState43(false);
   const [playing] = Timeline2.usePlayingState();
   const { playbackRate: globalPlaybackRate } = Internals.usePlaybackRate();
-  const sharedAudioContext = useContext47(SharedAudioContext22);
+  const sharedAudioContext = useContext46(SharedAudioContext22);
   const buffer = useBufferState();
   const [mediaMuted] = useMediaMutedState22();
   const [mediaVolume] = useMediaVolumeState22();
@@ -34288,7 +34535,7 @@ var VideoForPreviewAssertedShowing = ({
   effectChainStateRef.current = effectChainState;
   const frameRef = useRef210(frame);
   frameRef.current = frame;
-  const parentSequence = useContext47(SequenceContext22);
+  const parentSequence = useContext46(SequenceContext22);
   const isPremounting = Boolean(parentSequence?.premounting);
   const isPostmounting = Boolean(parentSequence?.postmounting);
   const sequenceOffset = ((parentSequence?.cumulatedFrom ?? 0) + (parentSequence?.relativeFrom ?? 0)) / videoConfig.fps;
@@ -34296,7 +34543,7 @@ var VideoForPreviewAssertedShowing = ({
   const currentTimeRef = useRef210(currentTime);
   currentTimeRef.current = currentTime;
   const preloadedSrc = usePreload22(src);
-  const buffering = useContext47(Internals.BufferingContextReact);
+  const buffering = useContext46(Internals.BufferingContextReact);
   if (!buffering) {
     throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
   }
@@ -35088,6 +35335,7 @@ var VideoInner = ({
     type: "video",
     data: basicInfo
   }), [basicInfo]);
+  const memoizedEffects = Internals.useMemoizedEffects(Internals.flattenEffects(_experimentalEffects ?? []));
   if (sequenceDurationInFrames === 0) {
     return null;
   }
@@ -35100,6 +35348,7 @@ var VideoInner = ({
     name: name ?? "<Video>",
     _experimentalControls: controls,
     _remotionInternalLoopDisplay: loopDisplay,
+    _experimentalEffects: memoizedEffects,
     showInTimeline: showInTimeline ?? true,
     children: /* @__PURE__ */ jsx65(InnerVideo, {
       audioStreamIndex: audioStreamIndex ?? 0,
@@ -35129,7 +35378,7 @@ var VideoInner = ({
       _experimentalControls: controls,
       objectFit: objectFit ?? "contain",
       _experimentalInitiallyDrawCachedFrame: _experimentalInitiallyDrawCachedFrame ?? false,
-      _experimentalEffects: _experimentalEffects ?? [],
+      _experimentalEffects: memoizedEffects,
       setMediaDurationInSeconds
     })
   });
@@ -36438,7 +36687,7 @@ import {
 import { BufferTarget, StreamTarget } from "mediabunny";
 
 // ../core/dist/esm/version.mjs
-var VERSION2 = "4.0.459";
+var VERSION2 = "4.0.461";
 
 // ../web-renderer/dist/esm/index.mjs
 import { AudioSample, VideoSample } from "mediabunny";
@@ -37086,7 +37335,6 @@ var UpdateTime = ({
     }
   }));
   return /* @__PURE__ */ jsx88(Internals.RemotionRootContexts, {
-    visualModeEnabled: false,
     audioEnabled,
     videoEnabled,
     logLevel,
@@ -40127,7 +40375,7 @@ var applyTextTransform = (text, transform) => {
     return text.toLowerCase();
   }
   if (transform === "capitalize") {
-    return text.replace(/\b\w/g, (char) => char.toUpperCase());
+    return text.replace(/\b(?<!['\u2019])\w/g, (char) => char.toUpperCase());
   }
   return text;
 };
@@ -43426,6 +43674,7 @@ var listOfRemotionPackages = [
   "@remotion/studio",
   "@remotion/tailwind",
   "@remotion/tailwind-v4",
+  "@remotion/timeline-utils",
   "@remotion/test-utils",
   "@remotion/three",
   "@remotion/transitions",
@@ -44702,7 +44951,7 @@ var GithubButton = () => {
       " ",
       /* @__PURE__ */ jsx164("div", {
         className: "text-xs inline-block ml-2 leading-none mt-[3px] self-center",
-        children: "45k"
+        children: "46k"
       })
     ]
   });