remotion 4.0.531 → 4.0.533

package/dist/esm/index.mjs

@@ -1561,7 +1561,7 @@ var Composition = (props) => {
 };
 
 // src/version.ts
-var VERSION = "4.0.531";
+var VERSION = "4.0.533";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -1599,9 +1599,10 @@ var Null = () => {
 
 // src/Sequence.tsx
 import {
+  createContext as createContext20,
   forwardRef as forwardRef3,
   useCallback as useCallback6,
-  useContext as useContext20,
+  useContext as useContext21,
   useMemo as useMemo14,
   useRef as useRef7,
   useState as useState6
@@ -2583,10 +2584,10 @@ var SequenceOutlineInternals = {
 };
 
 // src/SequenceManager.tsx
-import React16, { useCallback as useCallback5, useMemo as useMemo11, useRef as useRef4, useState as useState4 } from "react";
+import React16, { useCallback as useCallback5, useContext as useContext16, useMemo as useMemo11, useRef as useRef4, useState as useState4 } from "react";
 import { jsx as jsx10 } from "react/jsx-runtime";
 var useIsomorphicLayoutEffect = typeof window === "undefined" ? React16.useEffect : React16.useLayoutEffect;
-var SequenceManager = React16.createContext({
+var defaultSequenceManager = {
   registerSequence: () => {
     throw new Error("SequenceManagerContext not initialized");
   },
@@ -2595,7 +2596,34 @@ var SequenceManager = React16.createContext({
     throw new Error("SequenceManagerContext not initialized");
   },
   sequences: []
+};
+var SequenceManagerActionsContext = React16.createContext({
+  registerSequence: defaultSequenceManager.registerSequence,
+  updateSequence: defaultSequenceManager.updateSequence,
+  unregisterSequence: defaultSequenceManager.unregisterSequence
+});
+var SequenceManager = React16.createContext(defaultSequenceManager);
+var NativeSequenceManagerProvider = SequenceManager.Provider;
+var SequenceManagerProviderWithActions = ({ value, children }) => {
+  const actions = useMemo11(() => ({
+    registerSequence: value.registerSequence,
+    updateSequence: value.updateSequence,
+    unregisterSequence: value.unregisterSequence
+  }), [value.registerSequence, value.updateSequence, value.unregisterSequence]);
+  return /* @__PURE__ */ jsx10(SequenceManagerActionsContext.Provider, {
+    value: actions,
+    children: /* @__PURE__ */ jsx10(NativeSequenceManagerProvider, {
+      value,
+      children
+    })
+  });
+};
+Object.defineProperty(SequenceManager, "Provider", {
+  value: SequenceManagerProviderWithActions
 });
+var useSequenceManagerSequences = () => {
+  return useContext16(SequenceManager).sequences;
+};
 var SequenceManagerRefContext = React16.createContext({
   current: []
 });
@@ -2604,6 +2632,23 @@ var DisableSequenceRegistrationContext = React16.createContext(false);
 var DisableSequenceRegistrationProvider = ({ children }) => {
   return React16.createElement(DisableSequenceRegistrationContext.Provider, { value: true }, children);
 };
+var VisualModeDragOverridesSubscriptionContext = React16.createContext(null);
+var ActiveFromDragOverrideKeysContext = React16.createContext(null);
+var SequenceManagerScopeProviders = ({ children, dragOverridesSubscription, fromKeys }) => {
+  const manager = useContext16(SequenceManagerActionsContext);
+  const scopedDragOverridesSubscription = useMemo11(() => ({ ...dragOverridesSubscription, manager }), [dragOverridesSubscription, manager]);
+  const activeFromDragOverrideKeys = useMemo11(() => ({ manager, keys: fromKeys }), [fromKeys, manager]);
+  return /* @__PURE__ */ jsx10(ActiveFromDragOverrideKeysContext.Provider, {
+    value: activeFromDragOverrideKeys,
+    children: /* @__PURE__ */ jsx10(VisualModeDragOverridesSubscriptionContext.Provider, {
+      value: scopedDragOverridesSubscription,
+      children
+    })
+  });
+};
+var emptyDragOverrides = {};
+var emptyFromOverrideKeys = new Set;
+var emptyEffectDragOverrides = {};
 var makeSequencePropsSubscriptionKey = (key) => {
   return `${key.absolutePath}\x00${key.nodePath.join(".")}\x00${key.sequenceKeys.join(".")}\x00${key.effectKeys.map((keys) => keys.join(".")).join(".")}`;
 };
@@ -2621,6 +2666,44 @@ var VisualModeDragOverridesContext = React16.createContext({
     throw new Error("VisualModeDragOverridesContext not initialized");
   }
 });
+var useDragOverridesForNodePath = (nodePath) => {
+  const subscription = useContext16(VisualModeDragOverridesSubscriptionContext);
+  const manager = useContext16(SequenceManagerActionsContext);
+  const scopedSubscription = subscription?.manager === manager ? subscription : null;
+  const legacy = scopedSubscription === null ? useContext16(VisualModeDragOverridesContext) : null;
+  const key = nodePath === null ? null : makeSequencePropsSubscriptionKey(nodePath);
+  const subscribe = useCallback5((listener) => scopedSubscription?.subscribe(key, listener) ?? (() => {
+    return;
+  }), [key, scopedSubscription]);
+  const getSnapshot = useCallback5(() => scopedSubscription?.getSnapshot(key) ?? emptyDragOverrides, [key, scopedSubscription]);
+  const overrides = useSyncExternalStore2(subscribe, getSnapshot, getSnapshot);
+  return legacy !== null && nodePath !== null ? legacy.getDragOverrides(nodePath) : overrides;
+};
+var useActiveFromDragOverrideKeys = () => {
+  const snapshot = useContext16(ActiveFromDragOverrideKeysContext);
+  const manager = useContext16(SequenceManagerActionsContext);
+  return snapshot?.manager === manager ? snapshot.keys : emptyFromOverrideKeys;
+};
+var useEffectDragOverridesForNodePath = (nodePath, effectCount) => {
+  const subscription = useContext16(VisualModeDragOverridesSubscriptionContext);
+  const manager = useContext16(SequenceManagerActionsContext);
+  const scopedSubscription = subscription?.manager === manager ? subscription : null;
+  const legacy = scopedSubscription === null ? useContext16(VisualModeDragOverridesContext) : null;
+  const key = nodePath === null ? null : makeSequencePropsSubscriptionKey(nodePath);
+  const subscribe = useCallback5((listener) => scopedSubscription?.subscribeEffects(key, listener) ?? (() => {
+    return;
+  }), [key, scopedSubscription]);
+  const getSnapshot = useCallback5(() => scopedSubscription?.getEffectSnapshot(key) ?? emptyEffectDragOverrides, [key, scopedSubscription]);
+  const overrides = useSyncExternalStore2(subscribe, getSnapshot, getSnapshot);
+  if (legacy !== null && nodePath !== null) {
+    const legacyOverrides = {};
+    for (let index = 0;index < effectCount; index++) {
+      legacyOverrides[index] = legacy.getEffectDragOverrides(nodePath, index);
+    }
+    return legacyOverrides;
+  }
+  return overrides;
+};
 var VisualModeSettersContext = React16.createContext({
   setDragOverrides: () => {
     throw new Error("VisualModeSettersContext not initialized");
@@ -2641,6 +2724,7 @@ var VisualModeSettersContext = React16.createContext({
     throw new Error("VisualModeSettersContext not initialized");
   }
 });
+var VisualModeBatchSettersContext = React16.createContext(null);
 var effectDragOverridesKey = (nodePath, effectIndex) => `${makeSequencePropsSubscriptionKey(nodePath)}.effects.${effectIndex}`;
 var SequenceManagerProvider = ({ children }) => {
   const { isStudio } = useRemotionEnvironment();
@@ -2650,45 +2734,185 @@ var SequenceManagerProvider = ({ children }) => {
   const [sequences, setSequences] = useState4([]);
   const sequencesRef = useRef4(sequences);
   sequencesRef.current = sequences;
-  const [dragOverrides, setControlOverrides] = useState4({});
-  const controlOverridesRef = useRef4(dragOverrides);
-  controlOverridesRef.current = dragOverrides;
+  const [dragOverrideState, setDragOverrideState] = useState4(() => ({
+    overrides: {},
+    fromKeys: new Set
+  }));
+  const dragOverrides = dragOverrideState.overrides;
+  const dragOverridesStore = useRef4({
+    snapshot: dragOverrides,
+    listeners: new Map
+  });
   const [effectDragOverridesState, setEffectDragOverridesState] = useState4({});
+  const effectDragOverridesStore = useRef4({
+    snapshot: effectDragOverridesState,
+    byNode: new Map,
+    listeners: new Map
+  });
   const [propStatuses, setPropStatusesMapState] = useState4({});
   const propStatusesRef = useRef4(propStatuses);
   propStatusesRef.current = propStatuses;
-  const setDragOverrides = useCallback5((nodePath, key, value) => {
-    setControlOverrides((prev) => ({
-      ...prev,
-      [makeSequencePropsSubscriptionKey(nodePath)]: {
-        ...prev[makeSequencePropsSubscriptionKey(nodePath)],
-        [key]: value
+  const setDragOverridesBatch = useCallback5((overrides) => {
+    setDragOverrideState((prevState) => {
+      const prev = prevState.overrides;
+      let next = null;
+      let nextFromKeys = prevState.fromKeys;
+      for (const { nodePath, key, value } of overrides) {
+        const mapKey = makeSequencePropsSubscriptionKey(nodePath);
+        const existing = (next ?? prev)[mapKey]?.[key];
+        if (existing === value || existing?.type === "static" && value.type === "static" && Object.is(existing.value, value.value)) {
+          continue;
+        }
+        if (next === null) {
+          next = { ...prev };
+        }
+        if (next[mapKey] === prev[mapKey]) {
+          next[mapKey] = { ...prev[mapKey] };
+        }
+        next[mapKey][key] = value;
+        if (key === "from" && !nextFromKeys.has(mapKey)) {
+          nextFromKeys = new Set(nextFromKeys);
+          nextFromKeys.add(mapKey);
+        }
       }
-    }));
+      return next === null ? prevState : { overrides: next, fromKeys: nextFromKeys };
+    });
+  }, []);
+  const setDragOverrides = useCallback5((nodePath, key, value) => setDragOverridesBatch([{ nodePath, key, value }]), [setDragOverridesBatch]);
+  const subscribeDragOverrides = useCallback5((key, listener) => {
+    if (key === null) {
+      return () => {
+        return;
+      };
+    }
+    let listeners = dragOverridesStore.current.listeners.get(key);
+    if (!listeners) {
+      listeners = new Set;
+      dragOverridesStore.current.listeners.set(key, listeners);
+    }
+    listeners.add(listener);
+    return () => {
+      listeners.delete(listener);
+      if (listeners.size === 0) {
+        dragOverridesStore.current.listeners.delete(key);
+      }
+    };
+  }, []);
+  const getDragOverridesSnapshot = useCallback5((key) => {
+    return key === null ? emptyDragOverrides : dragOverridesStore.current.snapshot[key] ?? emptyDragOverrides;
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    const previous = dragOverridesStore.current.snapshot;
+    dragOverridesStore.current.snapshot = dragOverrides;
+    for (const key of new Set([
+      ...Object.keys(previous),
+      ...Object.keys(dragOverrides)
+    ])) {
+      if (previous[key] !== dragOverrides[key]) {
+        for (const listener of dragOverridesStore.current.listeners.get(key) ?? []) {
+          listener();
+        }
+      }
+    }
+  }, [dragOverrides]);
+  const subscribeEffectDragOverrides = useCallback5((key, listener) => {
+    if (key === null) {
+      return () => {
+        return;
+      };
+    }
+    let listeners = effectDragOverridesStore.current.listeners.get(key);
+    if (!listeners) {
+      listeners = new Set;
+      effectDragOverridesStore.current.listeners.set(key, listeners);
+    }
+    listeners.add(listener);
+    return () => {
+      listeners.delete(listener);
+      if (listeners.size === 0) {
+        effectDragOverridesStore.current.listeners.delete(key);
+      }
+    };
   }, []);
+  const getEffectDragOverridesSnapshot = useCallback5((key) => {
+    return key === null ? emptyEffectDragOverrides : effectDragOverridesStore.current.byNode.get(key) ?? emptyEffectDragOverrides;
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    const previous = effectDragOverridesStore.current.snapshot;
+    const byNode = new Map(effectDragOverridesStore.current.byNode);
+    const changedNodes = new Set;
+    for (const flatKey of new Set([
+      ...Object.keys(previous),
+      ...Object.keys(effectDragOverridesState)
+    ])) {
+      if (previous[flatKey] === effectDragOverridesState[flatKey]) {
+        continue;
+      }
+      const separator = flatKey.lastIndexOf(".effects.");
+      if (separator === -1) {
+        throw new Error("Invalid effect drag override key");
+      }
+      const nodeKey = flatKey.slice(0, separator);
+      const effectIndex = flatKey.slice(separator + ".effects.".length);
+      if (!changedNodes.has(nodeKey)) {
+        byNode.set(nodeKey, { ...byNode.get(nodeKey) });
+        changedNodes.add(nodeKey);
+      }
+      const next = byNode.get(nodeKey);
+      if (effectDragOverridesState[flatKey] === undefined) {
+        delete next[effectIndex];
+      } else {
+        next[effectIndex] = effectDragOverridesState[flatKey];
+      }
+    }
+    for (const nodeKey of changedNodes) {
+      if (Object.keys(byNode.get(nodeKey)).length === 0) {
+        byNode.delete(nodeKey);
+      }
+    }
+    effectDragOverridesStore.current.snapshot = effectDragOverridesState;
+    effectDragOverridesStore.current.byNode = byNode;
+    for (const nodeKey of changedNodes) {
+      for (const listener of effectDragOverridesStore.current.listeners.get(nodeKey) ?? []) {
+        listener();
+      }
+    }
+  }, [effectDragOverridesState]);
   const clearDragOverrides = useCallback5((nodePath) => {
-    setControlOverrides((prev) => {
+    setDragOverrideState((prevState) => {
+      const prev = prevState.overrides;
       const key = makeSequencePropsSubscriptionKey(nodePath);
       if (!prev[key]) {
-        return prev;
+        return prevState;
       }
       const next = { ...prev };
       delete next[key];
-      return next;
+      const nextFromKeys = prevState.fromKeys.has(key) ? new Set(prevState.fromKeys) : prevState.fromKeys;
+      nextFromKeys.delete(key);
+      return { overrides: next, fromKeys: nextFromKeys };
     });
   }, []);
-  const setEffectDragOverrides = useCallback5((nodePath, effectIndex, key, value) => {
+  const setEffectDragOverridesBatch = useCallback5((overrides) => {
     setEffectDragOverridesState((prev) => {
-      const mapKey = effectDragOverridesKey(nodePath, effectIndex);
-      return {
-        ...prev,
-        [mapKey]: {
-          ...prev[mapKey],
-          [key]: value
+      let next = null;
+      for (const { nodePath, effectIndex, key, value } of overrides) {
+        const mapKey = effectDragOverridesKey(nodePath, effectIndex);
+        const existing = (next ?? prev)[mapKey]?.[key];
+        if (existing === value || existing?.type === "static" && value.type === "static" && Object.is(existing.value, value.value)) {
+          continue;
         }
-      };
+        if (next === null) {
+          next = { ...prev };
+        }
+        if (next[mapKey] === prev[mapKey]) {
+          next[mapKey] = { ...prev[mapKey] };
+        }
+        next[mapKey][key] = value;
+      }
+      return next ?? prev;
     });
   }, []);
+  const setEffectDragOverrides = useCallback5((nodePath, effectIndex, key, value) => setEffectDragOverridesBatch([{ nodePath, effectIndex, key, value }]), [setEffectDragOverridesBatch]);
   const clearEffectDragOverrides = useCallback5((nodePath, effectIndex) => {
     setEffectDragOverridesState((prev) => {
       const mapKey = effectDragOverridesKey(nodePath, effectIndex);
@@ -2806,6 +3030,17 @@ var SequenceManagerProvider = ({ children }) => {
       unregisterSequence
     };
   }, [registerSequence, sequences, unregisterSequence, updateSequence]);
+  const dragOverridesSubscription = useMemo11(() => ({
+    subscribe: subscribeDragOverrides,
+    getSnapshot: getDragOverridesSnapshot,
+    subscribeEffects: subscribeEffectDragOverrides,
+    getEffectSnapshot: getEffectDragOverridesSnapshot
+  }), [
+    getDragOverridesSnapshot,
+    getEffectDragOverridesSnapshot,
+    subscribeDragOverrides,
+    subscribeEffectDragOverrides
+  ]);
   const getDragOverrides = useCallback5((nodePath) => {
     return dragOverrides[makeSequencePropsSubscriptionKey(nodePath)] ?? {};
   }, [dragOverrides]);
@@ -2840,6 +3075,7 @@ var SequenceManagerProvider = ({ children }) => {
     setPropStatuses,
     remapPropStatuses
   ]);
+  const batchSettersContext = useMemo11(() => ({ setDragOverridesBatch, setEffectDragOverridesBatch }), [setDragOverridesBatch, setEffectDragOverridesBatch]);
   const providers = /* @__PURE__ */ jsx10(SequenceManagerRefContext.Provider, {
     value: sequencesRef,
     children: /* @__PURE__ */ jsx10(SequenceManager.Provider, {
@@ -2848,11 +3084,18 @@ var SequenceManagerProvider = ({ children }) => {
         value: propStatusesRef,
         children: /* @__PURE__ */ jsx10(VisualModePropStatusesContext.Provider, {
           value: propStatusesContext,
-          children: /* @__PURE__ */ jsx10(VisualModeDragOverridesContext.Provider, {
-            value: dragOverridesContext,
-            children: /* @__PURE__ */ jsx10(VisualModeSettersContext.Provider, {
-              value: settersContext,
-              children
+          children: /* @__PURE__ */ jsx10(SequenceManagerScopeProviders, {
+            dragOverridesSubscription,
+            fromKeys: dragOverrideState.fromKeys,
+            children: /* @__PURE__ */ jsx10(VisualModeDragOverridesContext.Provider, {
+              value: dragOverridesContext,
+              children: /* @__PURE__ */ jsx10(VisualModeSettersContext.Provider, {
+                value: settersContext,
+                children: /* @__PURE__ */ jsx10(VisualModeBatchSettersContext.Provider, {
+                  value: batchSettersContext,
+                  children
+                })
+              })
             })
           })
         })
@@ -2889,7 +3132,7 @@ var useRequireToBeInsideSeries = () => {
 };
 
 // src/use-premounting.ts
-import { useContext as useContext16, useMemo as useMemo12 } from "react";
+import { useContext as useContext17, useMemo as useMemo12 } from "react";
 
 // src/PremountContext.tsx
 import { createContext as createContext17 } from "react";
@@ -2914,14 +3157,14 @@ var usePremounting = ({
   styleWhilePostmounted,
   hideWhilePremounted
 }) => {
-  const parentPremountContext = useContext16(PremountContext);
+  const parentPremountContext = useContext17(PremountContext);
   const frame = useCurrentFrame() - parentPremountContext.premountFramesRemaining;
   const environment = useRemotionEnvironment();
   const { fps } = useVideoConfig();
   const effectivePremountFor = ENABLE_V5_BREAKING_CHANGES ? premountFor ?? fps : premountFor ?? 0;
   const effectivePostmountFor = postmountFor ?? 0;
   const endExclusive = from + durationInFrames;
-  const sequenceContext = useContext16(SequenceContext);
+  const sequenceContext = useContext17(SequenceContext);
   const boundaryTolerance = getSequenceBoundaryTolerance({
     absoluteFrame: useTimelinePosition(),
     cumulatedFrom: sequenceContext ? sequenceContext.cumulatedFrom + sequenceContext.relativeFrom : 0,
@@ -2965,13 +3208,13 @@ var usePremounting = ({
 };
 
 // src/use-sequence-registration.ts
-import { useContext as useContext17, useEffect as useEffect4, useRef as useRef5 } from "react";
+import { useContext as useContext18, useEffect as useEffect4, useRef as useRef5 } from "react";
 var useSequenceRegistration = ({
   getSequence,
   id
 }) => {
-  const { registerSequence, unregisterSequence, updateSequence } = useContext17(SequenceManager);
-  const registrationDisabled = useContext17(DisableSequenceRegistrationContext);
+  const { registerSequence, unregisterSequence, updateSequence } = useContext18(SequenceManagerActionsContext);
+  const registrationDisabled = useContext18(DisableSequenceRegistrationContext);
   const getSequenceRef = useRef5(getSequence);
   getSequenceRef.current = getSequence;
   const lastRegisteredGetterRef = useRef5(null);
@@ -3004,7 +3247,7 @@ var useSequenceRegistration = ({
 import React18, {
   createContext as createContext19,
   forwardRef as forwardRef2,
-  useContext as useContext19,
+  useContext as useContext20,
   useLayoutEffect as useLayoutEffect4,
   useMemo as useMemo13,
   useState as useState5
@@ -3044,7 +3287,7 @@ var deleteNestedKey = (obj, keysToRemove) => {
 };
 
 // src/effects/use-memoized-effects.ts
-import { useContext as useContext18, useLayoutEffect as useLayoutEffect3, useRef as useRef6 } from "react";
+import { useContext as useContext19, useLayoutEffect as useLayoutEffect3, useRef as useRef6 } from "react";
 
 // src/bezier.ts
 var NEWTON_ITERATIONS = 4;
@@ -5040,6 +5283,7 @@ var OverrideIdsToNodePathsSettersContext = createContext18({
 });
 
 // src/effects/use-memoized-effects.ts
+var emptyDragOverrides2 = {};
 var mergeOverrides = ({
   descriptor,
   propStatusOverrides,
@@ -5155,12 +5399,12 @@ var useMemoizedEffects = ({
   overrideId
 }) => {
   const previousRef = useRef6(null);
-  const { propStatuses } = useContext18(VisualModePropStatusesContext);
-  const { getEffectDragOverrides } = useContext18(VisualModeDragOverridesContext);
+  const { propStatuses } = useContext19(VisualModePropStatusesContext);
   const frame = useCurrentFrame();
-  const { overrideIdToNodePathMappings } = useContext18(OverrideIdsToNodePathsGettersContext);
+  const { overrideIdToNodePathMappings } = useContext19(OverrideIdsToNodePathsGettersContext);
   const previous = previousRef.current;
   const nodePath = overrideId ? overrideIdToNodePathMappings[overrideId] ?? null : null;
+  const effectDragOverrides = useEffectDragOverridesForNodePath(nodePath, effects.length);
   const resolved = effects.map((descriptor, index) => {
     if (nodePath === null) {
       return {
@@ -5175,7 +5419,7 @@ var useMemoizedEffects = ({
       effectIndex: index
     });
     const propStatusOverrides = effectStatus.type === "can-update-effect" ? resolvePropStatusOverrides(effectStatus.props, frame) : null;
-    const dragOverridesMap = getEffectDragOverrides(nodePath, index);
+    const dragOverridesMap = effectDragOverrides[index] ?? emptyDragOverrides2;
     const dragOverrides = Object.keys(dragOverridesMap).length === 0 ? null : dragOverridesMap;
     const { params, effectKey } = mergeOverrides({
       descriptor,
@@ -5521,9 +5765,9 @@ var withInteractivitySchema = ({
     } = props;
     const cleanProps = propsWithoutInternalStack;
     const env = useRemotionEnvironment();
-    const canUseRemotionHooks = useContext19(CanUseRemotionHooks);
-    const disableInteractivity = useContext19(DisableInteractivityContext);
-    const enableInteractivity = useContext19(EnableInteractivityContext);
+    const canUseRemotionHooks = useContext20(CanUseRemotionHooks);
+    const disableInteractivity = useContext20(DisableInteractivityContext);
+    const enableInteractivity = useContext20(EnableInteractivityContext);
     if (!env.isStudio && !enableInteractivity || env.isRendering || !canUseRemotionHooks || disableInteractivity) {
       return React18.createElement(Component, {
         ...cleanProps,
@@ -5531,9 +5775,8 @@ var withInteractivitySchema = ({
         ref
       });
     }
-    const { propStatuses } = useContext19(VisualModePropStatusesContext);
-    const { getDragOverrides } = useContext19(VisualModeDragOverridesContext);
-    const nodePathMapping = useContext19(OverrideIdsToNodePathsGettersContext);
+    const { propStatuses } = useContext20(VisualModePropStatusesContext);
+    const nodePathMapping = useContext20(OverrideIdsToNodePathsGettersContext);
     const frame = useCurrentFrame();
     const videoConfig = useUnsafeVideoConfig();
     const durationInFrames = videoConfig?.durationInFrames;
@@ -5569,6 +5812,7 @@ var withInteractivitySchema = ({
       return newOverrideId;
     });
     const nodePath = env.isReadOnlyStudio ? null : nodePathMapping.overrideIdToNodePathMappings[overrideId] ?? null;
+    const dragOverrides = useDragOverridesForNodePath(nodePath);
     const runtimeValues = flatKeys.map((key) => getRuntimeValueForSchemaKey({
       flatSchema,
       key,
@@ -5601,13 +5845,13 @@ var withInteractivitySchema = ({
       return computeEffectiveSchemaValuesDotNotation({
         schema: schemaWithSequenceName,
         currentValue: currentRuntimeValueDotNotation,
-        overrideValues: nodePath === null ? {} : getDragOverrides(nodePath),
+        overrideValues: dragOverrides,
         propStatus: nodePath === null ? undefined : getPropStatusesCtx(propStatuses, nodePath),
         frame
       });
     }, [
       currentRuntimeValueDotNotation,
-      getDragOverrides,
+      dragOverrides,
       nodePath,
       propStatuses,
       frame
@@ -5632,6 +5876,7 @@ var withInteractivitySchema = ({
 
 // src/Sequence.tsx
 import { jsx as jsx12 } from "react/jsx-runtime";
+var SeriesContentVisibilityContext = createContext20(true);
 var EMPTY_EFFECTS = [];
 var RegularSequenceRefForwardingFunction = ({
   from = 0,
@@ -5664,7 +5909,7 @@ var RegularSequenceRefForwardingFunction = ({
 }, ref) => {
   const { layout = "absolute-fill" } = other;
   const [id] = useState6(() => String(Math.random()));
-  const parentSequence = useContext20(SequenceContext);
+  const parentSequence = useContext21(SequenceContext);
   const parentPlaybackRate = parentSequence?.playbackRate ?? 1;
   const cumulativePlaybackRate = parentPlaybackRate * playbackRate;
   const cumulatedFrom = parentSequence ? parentSequence.cumulatedFrom + parentSequence.relativeFrom : 0;
@@ -5764,8 +6009,8 @@ var RegularSequenceRefForwardingFunction = ({
   const relativeFrom = effectiveRelativeFrom / parentPlaybackRate;
   const absoluteFrom = (parentSequence?.absoluteFrom ?? 0) + relativeFrom;
   const localClockEnd = loopPeriod === null ? actualDurationInFrames * playbackRate + trimBefore : Math.min(loopPeriod, actualDurationInFrames - loopOffset) * playbackRate + trimBefore;
-  const sequenceRegistrationEnabled = useContext20(SequenceRegistrationContext);
-  const canvasOutlinesEnabled = useContext20(SequenceOutlineContext);
+  const sequenceRegistrationEnabled = useContext21(SequenceRegistrationContext);
+  const canvasOutlinesEnabled = useContext21(SequenceOutlineContext);
   const env = useRemotionEnvironment();
   const shouldDiscoverOutline = env.isStudio || canvasOutlinesEnabled;
   const automaticOutlineRef = useMemo14(() => shouldDiscoverOutline && layout === "none" && !passedRefForOutline ? SequenceOutlineInternals.createRef() : null, [shouldDiscoverOutline, layout, passedRefForOutline]);
@@ -5838,7 +6083,7 @@ var RegularSequenceRefForwardingFunction = ({
     return name ?? "";
   }, [name]);
   const resolvedDocumentationLink = documentationLink ?? "https://www.remotion.dev/docs/sequence";
-  const isInsideSeries = useContext20(IsInsideSeriesContext);
+  const isInsideSeries = useContext21(IsInsideSeriesContext);
   const stackRef = useRef7(null);
   stackRef.current = controls ? getStackForControls(controls) ?? stack ?? null : stack ?? null;
   const registeredFrozenFrame = typeof freeze === "number" ? freeze : null;
@@ -5854,6 +6099,11 @@ var RegularSequenceRefForwardingFunction = ({
   const controlsComponentIdentity = controls?.componentIdentity;
   const controlsComponentName = controls?.componentName;
   const controlsVideoConfigValues = controls?.videoConfigValues;
+  const isInsideNonPremountFreeze = useIsInsideNonPremountFreeze();
+  const canInferDuration = (controlsComponentIdentity === "dev.remotion.remotion.Series" || controlsComponentIdentity === "dev.remotion.transitions.TransitionSeries") && !loop && registeredFrozenFrame === null && !isInsideNonPremountFreeze && !hidden;
+  const autoDuration = canInferDuration && durationInFrames === undefined;
+  const isSeriesChild = controlsComponentIdentity === "dev.remotion.remotion.Series.Sequence" || controlsComponentIdentity === "dev.remotion.transitions.TransitionSeries.Sequence" || controlsComponentIdentity === "dev.remotion.transitions.TransitionSeries.Transition" || controlsComponentIdentity === "dev.remotion.transitions.TransitionSeries.Overlay";
+  const seriesContentVisible = useContext21(SeriesContentVisibilityContext);
   const effectRuntimeValues = useMemo14(() => _remotionInternalEffects?.runtimeValues ?? null, [_remotionInternalEffects]);
   const registrationControls = useMemo14(() => {
     if (controlsSchema === undefined || controlsRuntimeValues === undefined || controlsOverrideId === undefined || controlsSupportsEffects === undefined || controlsComponentIdentity === undefined || controlsComponentName === undefined || controlsVideoConfigValues === undefined) {
@@ -5944,6 +6194,9 @@ var RegularSequenceRefForwardingFunction = ({
       sequencePlaybackRate: playbackRate,
       trimBefore: registeredTrimBefore,
       duration: actualDurationInFrames,
+      ...autoDuration ? { autoDuration: true } : {},
+      ...canInferDuration ? { canInferDuration: true } : {},
+      ...isSeriesChild ? { unclippedDuration: effectiveDurationInFrames } : {},
       id,
       displayName: timelineClipName,
       documentationLink: resolvedDocumentationLink,
@@ -5969,6 +6222,10 @@ var RegularSequenceRefForwardingFunction = ({
     playbackRate,
     parentSequence?.id,
     actualDurationInFrames,
+    autoDuration,
+    canInferDuration,
+    isSeriesChild,
+    effectiveDurationInFrames,
     from,
     registeredTrimBefore,
     showInTimeline,
@@ -6000,7 +6257,7 @@ var RegularSequenceRefForwardingFunction = ({
     parentPlaybackRate,
     durationInFrames: effectiveDurationInFrames
   });
-  const content2 = frameInParent - from < -boundaryTolerance ? null : frameInParent - endThreshold >= -boundaryTolerance ? null : children;
+  const content2 = !seriesContentVisible || frameInParent - from < -boundaryTolerance ? null : frameInParent - endThreshold >= -boundaryTolerance ? null : children;
   const frozenContent = content2 === null || typeof freeze === "undefined" || freeze === null ? content2 : /* @__PURE__ */ jsx12(Freeze, {
     frame: freeze,
     children: content2
@@ -6046,14 +6303,19 @@ var RegularSequenceRefForwardingFunction = ({
       children: null
     }) : null;
   }
+  const retainSeriesRegistration = env.isStudio && canInferDuration;
+  const sequenceContent = loopedContent === null ? retainSeriesRegistration ? children : null : other.layout === "none" ? loopedContent : /* @__PURE__ */ jsx12(AbsoluteFillElement, {
+    ref: sequenceRef,
+    style: defaultStyle,
+    className: other.className,
+    children: loopedContent
+  });
   const sequence = /* @__PURE__ */ jsx12(SequenceContext.Provider, {
     value: contextValue,
-    children: loopedContent === null ? null : other.layout === "none" ? loopedContent : /* @__PURE__ */ jsx12(AbsoluteFillElement, {
-      ref: sequenceRef,
-      style: defaultStyle,
-      className: other.className,
-      children: loopedContent
-    })
+    children: retainSeriesRegistration ? /* @__PURE__ */ jsx12(SeriesContentVisibilityContext.Provider, {
+      value: content2 !== null,
+      children: sequenceContent
+    }) : sequenceContent
   });
   return shouldDiscoverOutline ? /* @__PURE__ */ jsx12(SequenceOrderMarker, {
     sequenceId: id,
@@ -7409,11 +7671,11 @@ var createEffect = (definition) => {
   return factory;
 };
 // src/Artifact.tsx
-import { useContext as useContext21, useLayoutEffect as useLayoutEffect7, useState as useState9 } from "react";
+import { useContext as useContext22, useLayoutEffect as useLayoutEffect7, useState as useState9 } from "react";
 
 // src/RenderAssetManager.tsx
 import {
-  createContext as createContext20,
+  createContext as createContext21,
   useCallback as useCallback9,
   useImperativeHandle as useImperativeHandle3,
   useLayoutEffect as useLayoutEffect6,
@@ -7455,7 +7717,7 @@ var validateRenderAsset = (artifact) => {
 
 // src/RenderAssetManager.tsx
 import { jsx as jsx16 } from "react/jsx-runtime";
-var RenderAssetManager = createContext20({
+var RenderAssetManager = createContext21({
   registerRenderAsset: () => {
     return;
   },
@@ -7514,7 +7776,7 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
 // src/Artifact.tsx
 var ArtifactThumbnail = Symbol("Thumbnail");
 var Artifact = ({ filename, content: content2, downloadBehavior }) => {
-  const { registerRenderAsset, unregisterRenderAsset } = useContext21(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext22(RenderAssetManager);
   const env = useRemotionEnvironment();
   const frame = useCurrentFrame();
   const [id] = useState9(() => {
@@ -7571,7 +7833,7 @@ var Artifact = ({ filename, content: content2, downloadBehavior }) => {
 };
 Artifact.Thumbnail = ArtifactThumbnail;
 // src/audio/html5-audio.tsx
-import { forwardRef as forwardRef7, useCallback as useCallback16, useContext as useContext36 } from "react";
+import { forwardRef as forwardRef7, useCallback as useCallback16, useContext as useContext37 } from "react";
 
 // src/absolute-src.ts
 var getAbsoluteSrc = (relativeSrc) => {
@@ -7613,9 +7875,9 @@ var getMediaTrimAfter = ({
 };
 
 // src/loop/index.tsx
-import React22, { createContext as createContext21, useContext as useContext22, useMemo as useMemo19 } from "react";
+import React22, { createContext as createContext22, useContext as useContext23, useMemo as useMemo19 } from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
-var LoopTimelineContext = createContext21(null);
+var LoopTimelineContext = createContext22(null);
 var useLoop = () => {
   return React22.useContext(LoopContext);
 };
@@ -7630,7 +7892,7 @@ var Loop = ({
 }) => {
   const currentFrame = useCurrentFrame();
   const { durationInFrames: compDuration } = useVideoConfig();
-  const parentSequence = useContext22(SequenceContext);
+  const parentSequence = useContext23(SequenceContext);
   const parentPlaybackRate = parentSequence?.playbackRate ?? 1;
   const playbackRateValue = playbackRate ?? 1;
   const iterationDurationInFrames = durationInFrames / playbackRateValue;
@@ -7702,7 +7964,7 @@ var Loop = ({
 Loop.useLoop = useLoop;
 
 // src/prefetch.ts
-import { useContext as useContext23 } from "react";
+import { useContext as useContext24 } from "react";
 
 // src/playback-logging.ts
 var playbackLogging = ({
@@ -7716,9 +7978,9 @@ var playbackLogging = ({
 };
 
 // src/prefetch-state.tsx
-import { createContext as createContext22, useEffect as useEffect7, useState as useState10 } from "react";
+import { createContext as createContext23, useEffect as useEffect7, useState as useState10 } from "react";
 import { jsx as jsx18 } from "react/jsx-runtime";
-var PreloadContext = createContext22({});
+var PreloadContext = createContext23({});
 var preloads = {};
 var updaters = [];
 var setPreloads = (updater) => {
@@ -7758,7 +8020,7 @@ var getSrcWithoutHash = (src) => {
   return src.slice(0, hashIndex);
 };
 var usePreload = (src) => {
-  const preloads2 = useContext23(PreloadContext);
+  const preloads2 = useContext24(PreloadContext);
   const hashFragmentIndex = removeAndGetHashFragment(src);
   const withoutHashFragment = getSrcWithoutHash(src);
   if (!preloads2[withoutHashFragment]) {
@@ -8043,7 +8305,7 @@ var resolveTrimProps = ({
 };
 
 // src/video/duration-state.tsx
-import { createContext as createContext23, useMemo as useMemo20, useReducer } from "react";
+import { createContext as createContext24, useMemo as useMemo20, useReducer } from "react";
 import { jsx as jsx19 } from "react/jsx-runtime";
 var durationReducer = (state, action) => {
   switch (action.type) {
@@ -8061,7 +8323,7 @@ var durationReducer = (state, action) => {
       return state;
   }
 };
-var DurationsContext = createContext23({
+var DurationsContext = createContext24({
   durations: {},
   setDurations: () => {
     throw new Error("context missing");
@@ -8085,7 +8347,7 @@ var DurationsContextProvider = ({ children }) => {
 import { useCallback as useCallback15 } from "react";
 import React28, {
   forwardRef as forwardRef5,
-  useContext as useContext33,
+  useContext as useContext34,
   useEffect as useEffect14,
   useImperativeHandle as useImperativeHandle4,
   useMemo as useMemo28,
@@ -8146,14 +8408,14 @@ var random = (seed, dummy) => {
 };
 
 // src/use-amplification.ts
-import { useContext as useContext25, useLayoutEffect as useLayoutEffect8, useRef as useRef15 } from "react";
+import { useContext as useContext26, useLayoutEffect as useLayoutEffect8, useRef as useRef15 } from "react";
 
 // src/audio/shared-audio-tags.tsx
 import React25, {
-  createContext as createContext24,
+  createContext as createContext25,
   createRef as createRef2,
   useCallback as useCallback10,
-  useContext as useContext24,
+  useContext as useContext25,
   useEffect as useEffect8,
   useMemo as useMemo22,
   useRef as useRef13,
@@ -8435,8 +8697,8 @@ var didPropChange = (key, newProp, prevProp) => {
   }
   return true;
 };
-var SharedAudioContext = createContext24(null);
-var SharedAudioTagsContext = createContext24(null);
+var SharedAudioContext = createContext25(null);
+var SharedAudioTagsContext = createContext25(null);
 var shouldSaveForLater = (state) => {
   if (state === "suspended" || state === "running-to-suspended" || state === "interrupted") {
     return true;
@@ -8679,7 +8941,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const env = useRemotionEnvironment();
-  const audioCtx = useContext24(SharedAudioContext);
+  const audioCtx = useContext25(SharedAudioContext);
   const audioContext = audioCtx?.audioContext ?? null;
   const resume = audioCtx?.resume;
   const [refs] = useState11(() => {
@@ -8862,8 +9124,8 @@ var useSharedAudio = ({
   premounting,
   postmounting
 }) => {
-  const audioCtx = useContext24(SharedAudioContext);
-  const tagsCtx = useContext24(SharedAudioTagsContext);
+  const audioCtx = useContext25(SharedAudioContext);
+  const tagsCtx = useContext25(SharedAudioTagsContext);
   const [elem] = useState11(() => {
     if (tagsCtx && tagsCtx.numberOfAudioTags > 0) {
       return tagsCtx.registerAudio({ aud, audioId, premounting, postmounting });
@@ -9052,7 +9314,7 @@ var useVolume = ({
   const audioStuffRef = useRef15(null);
   const currentVolumeRef = useRef15(volume);
   currentVolumeRef.current = volume;
-  const sharedAudioContext = useContext25(SharedAudioContext);
+  const sharedAudioContext = useContext26(SharedAudioContext);
   if (!sharedAudioContext) {
     throw new Error("useAmplification must be used within a SharedAudioContext");
   }
@@ -9118,19 +9380,19 @@ var useVolume = ({
 };
 
 // src/use-media-in-timeline.ts
-import { useCallback as useCallback11, useContext as useContext27, useMemo as useMemo23 } from "react";
+import { useCallback as useCallback11, useContext as useContext28, useMemo as useMemo23 } from "react";
 
 // src/audio/use-audio-frame.ts
-import { createContext as createContext25, useContext as useContext26 } from "react";
-var Html5MediaTrimContext = createContext25(0);
+import { createContext as createContext26, useContext as useContext27 } from "react";
+var Html5MediaTrimContext = createContext26(0);
 var useMediaStartsAt = () => {
-  const parentSequence = useContext26(SequenceContext);
+  const parentSequence = useContext27(SequenceContext);
   return parentSequence?.cumulatedNegativeFrom ?? 0;
 };
 var useFrameForVolumeProp = (behavior) => {
   const loop = Loop.useLoop();
-  const loopTimeline = useContext26(LoopTimelineContext);
-  const sequenceContext = useContext26(SequenceContext);
+  const loopTimeline = useContext27(LoopTimelineContext);
+  const sequenceContext = useContext27(SequenceContext);
   const frame = useCurrentFrame();
   const startsAt = useMediaStartsAt();
   if (behavior === "repeat" || loop === null) {
@@ -9225,7 +9487,7 @@ var useBasicMediaInTimeline = ({
   if (!src) {
     throw new Error("No src passed");
   }
-  const parentSequence = useContext27(SequenceContext);
+  const parentSequence = useContext28(SequenceContext);
   const sequencePlaybackRate = parentSequence?.playbackRate ?? 1;
   const duration = getTimelineDuration({
     compositionDurationInFrames: sequenceDurationInFrames,
@@ -9303,14 +9565,14 @@ var useMediaInTimeline = ({
   documentationLink,
   muted
 }) => {
-  const parentSequence = useContext27(SequenceContext);
-  const mediaTrimBefore = useContext27(Html5MediaTrimContext);
-  const sequenceRegistrationEnabled = useContext27(SequenceRegistrationContext);
+  const parentSequence = useContext28(SequenceContext);
+  const mediaTrimBefore = useContext28(Html5MediaTrimContext);
+  const sequenceRegistrationEnabled = useContext28(SequenceRegistrationContext);
   const { durationInFrames } = useVideoConfig();
   const mediaStartsAt = useMediaStartsAt();
   const loopContext = Loop.useLoop();
-  const loopTimeline = useContext27(LoopTimelineContext);
-  const canvasOutlinesEnabled = useContext27(SequenceOutlineContext);
+  const loopTimeline = useContext28(LoopTimelineContext);
+  const canvasOutlinesEnabled = useContext28(SequenceOutlineContext);
   const { isStudio } = useRemotionEnvironment();
   const automaticOutlineRef = useMemo23(() => mediaType === "video" && (isStudio || canvasOutlinesEnabled) ? SequenceOutlineInternals.createRef() : null, [canvasOutlinesEnabled, isStudio, mediaType]);
   const {
@@ -9429,7 +9691,7 @@ var useMediaInTimeline = ({
 // src/use-media-playback.ts
 import {
   useCallback as useCallback14,
-  useContext as useContext30,
+  useContext as useContext31,
   useEffect as useEffect12,
   useLayoutEffect as useLayoutEffect10,
   useRef as useRef18
@@ -9439,12 +9701,12 @@ import {
 import { useCallback as useCallback13, useMemo as useMemo26, useRef as useRef16 } from "react";
 
 // src/use-buffer-state.ts
-import { useContext as useContext29, useMemo as useMemo25 } from "react";
+import { useContext as useContext30, useMemo as useMemo25 } from "react";
 
 // src/buffering.tsx
 import React26, {
   useCallback as useCallback12,
-  useContext as useContext28,
+  useContext as useContext29,
   useEffect as useEffect9,
   useLayoutEffect as useLayoutEffect9,
   useMemo as useMemo24,
@@ -9509,8 +9771,8 @@ var useBufferManager = (logLevel, mountTime, setBuffering, isBuffering) => {
 };
 var BufferingContextReact = React26.createContext(null);
 var BufferingProvider = ({ children }) => {
-  const { logLevel, mountTime } = useContext28(LogLevelContext);
-  const { isBuffering, setBuffering } = useContext28(SetTimelineContext);
+  const { logLevel, mountTime } = useContext29(LogLevelContext);
+  const { isBuffering, setBuffering } = useContext29(SetTimelineContext);
   const bufferManager = useBufferManager(logLevel ?? "info", mountTime, setBuffering, isBuffering);
   return /* @__PURE__ */ jsx21(BufferingContextReact.Provider, {
     value: bufferManager,
@@ -9520,7 +9782,7 @@ var BufferingProvider = ({ children }) => {
 
 // src/use-buffer-state.ts
 var useBufferState = () => {
-  const buffer = useContext29(BufferingContextReact);
+  const buffer = useContext30(BufferingContextReact);
   const logLevel = useLogLevel();
   const addBlock = buffer ? buffer.addBlock : null;
   return useMemo25(() => ({
@@ -10043,7 +10305,7 @@ var useMediaPlayback = ({
   const playing = usePlaying();
   const playerBuffering = useBuffering();
   const { fps } = useVideoConfig();
-  const mediaTrimBefore = useContext30(Html5MediaTrimContext);
+  const mediaTrimBefore = useContext31(Html5MediaTrimContext);
   const lastSeekDueToShift = useRef18(null);
   const lastSeek = useRef18(null);
   const logLevel = useLogLevel();
@@ -10089,7 +10351,7 @@ var useMediaPlayback = ({
     logLevel,
     mountTime
   });
-  const sequenceContext = useContext30(SequenceContext);
+  const sequenceContext = useContext31(SequenceContext);
   const playbackRate = localPlaybackRate * globalPlaybackRate * (sequenceContext?.playbackRate ?? 1);
   const acceptableTimeShiftButLessThanDuration = (() => {
     if (mediaRef.current?.duration) {
@@ -10253,7 +10515,7 @@ var useMediaPlayback = ({
 };
 
 // src/use-media-tag.ts
-import { useContext as useContext31, useEffect as useEffect13, useRef as useRef19 } from "react";
+import { useContext as useContext32, useEffect as useEffect13, useRef as useRef19 } from "react";
 var useMediaTag = ({
   mediaRef,
   id,
@@ -10263,7 +10525,7 @@ var useMediaTag = ({
   isPostmounting
 }) => {
   const { audioAndVideoTags, isPlaying } = useTimelineContext();
-  const { subscribePlaying } = useContext31(SetTimelineContext);
+  const { subscribePlaying } = useContext32(SetTimelineContext);
   const isPlayingRef = useRef19(isPlaying);
   isPlayingRef.current = isPlaying;
   const logLevel = useLogLevel();
@@ -10327,12 +10589,12 @@ var useMediaTag = ({
 };
 
 // src/volume-position-state.ts
-import { createContext as createContext26, useContext as useContext32, useMemo as useMemo27 } from "react";
-var MediaVolumeContext = createContext26({
+import { createContext as createContext27, useContext as useContext33, useMemo as useMemo27 } from "react";
+var MediaVolumeContext = createContext27({
   playerMuted: false,
   mediaVolume: 1
 });
-var SetMediaVolumeContext = createContext26({
+var SetMediaVolumeContext = createContext27({
   setPlayerMuted: () => {
     throw new Error("default");
   },
@@ -10341,15 +10603,15 @@ var SetMediaVolumeContext = createContext26({
   }
 });
 var useMediaVolumeState = () => {
-  const { mediaVolume } = useContext32(MediaVolumeContext);
-  const { setMediaVolume } = useContext32(SetMediaVolumeContext);
+  const { mediaVolume } = useContext33(MediaVolumeContext);
+  const { setMediaVolume } = useContext33(SetMediaVolumeContext);
   return useMemo27(() => {
     return [mediaVolume, setMediaVolume];
   }, [mediaVolume, setMediaVolume]);
 };
 var usePlayerMutedState = () => {
-  const { playerMuted } = useContext32(MediaVolumeContext);
-  const { setPlayerMuted } = useContext32(SetMediaVolumeContext);
+  const { playerMuted } = useContext33(MediaVolumeContext);
+  const { setPlayerMuted } = useContext33(SetMediaVolumeContext);
   return useMemo27(() => {
     return [playerMuted, setPlayerMuted];
   }, [playerMuted, setPlayerMuted]);
@@ -10439,7 +10701,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     throw new TypeError("No 'src' was passed to <Html5Audio>.");
   }
   const preloadedSrc = usePreload(src);
-  const sequenceContext = useContext33(SequenceContext);
+  const sequenceContext = useContext34(SequenceContext);
   const { isStudio } = useRemotionEnvironment();
   const [timelineId] = useState14(() => String(Math.random()));
   const userPreferredVolume = evaluateVolume({
@@ -10593,7 +10855,7 @@ var AudioForPreview = forwardRef5(AudioForDevelopmentForwardRefFunction);
 // src/audio/AudioForRendering.tsx
 import {
   forwardRef as forwardRef6,
-  useContext as useContext35,
+  useContext as useContext36,
   useEffect as useEffect15,
   useImperativeHandle as useImperativeHandle5,
   useLayoutEffect as useLayoutEffect11,
@@ -10602,11 +10864,11 @@ import {
 } from "react";
 
 // src/use-media-enabled.tsx
-import { createContext as createContext27, useContext as useContext34, useMemo as useMemo29 } from "react";
+import { createContext as createContext28, useContext as useContext35, useMemo as useMemo29 } from "react";
 import { jsx as jsx23 } from "react/jsx-runtime";
-var MediaEnabledContext = createContext27(null);
+var MediaEnabledContext = createContext28(null);
 var useVideoEnabled = () => {
-  const context = useContext34(MediaEnabledContext);
+  const context = useContext35(MediaEnabledContext);
   if (!context) {
     return window.remotion_videoEnabled;
   }
@@ -10616,7 +10878,7 @@ var useVideoEnabled = () => {
   return context.videoEnabled;
 };
 var useAudioEnabled = () => {
-  const context = useContext34(MediaEnabledContext);
+  const context = useContext35(MediaEnabledContext);
   if (!context) {
     return window.remotion_audioEnabled;
   }
@@ -10663,10 +10925,10 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   const absoluteFrame = useTimelinePosition();
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const frame = useCurrentFrame();
-  const sequenceContext = useContext35(SequenceContext);
+  const sequenceContext = useContext36(SequenceContext);
   const sequencePlaybackRate = sequenceContext?.playbackRate ?? 1;
-  const audioStartFrame = useContext35(Html5MediaTrimContext);
-  const { registerRenderAsset, unregisterRenderAsset } = useContext35(RenderAssetManager);
+  const audioStartFrame = useContext36(Html5MediaTrimContext);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext36(RenderAssetManager);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   const id = useMemo30(() => `audio-${random(props.src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}`, [
     props.src,
@@ -10779,7 +11041,7 @@ var AudioForRendering = forwardRef6(AudioForRenderingRefForwardingFunction);
 // src/audio/html5-audio.tsx
 import { jsx as jsx25 } from "react/jsx-runtime";
 var AudioRefForwardingFunction = (props, ref) => {
-  const audioTagsContext = useContext36(SharedAudioTagsContext);
+  const audioTagsContext = useContext37(SharedAudioTagsContext);
   const propsWithFreeze = props;
   const {
     startFrom,
@@ -10805,7 +11067,7 @@ var AudioRefForwardingFunction = (props, ref) => {
   if (typeof freeze !== "undefined") {
     throw new TypeError('The "freeze" prop is not supported on <Html5Audio />. Use <Sequence freeze={...}> to freeze media playback.');
   }
-  const { durations, setDurations } = useContext36(DurationsContext);
+  const { durations, setDurations } = useContext37(DurationsContext);
   if (typeof props.src !== "string") {
     throw new TypeError(`The \`<Html5Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
   }
@@ -11191,10 +11453,10 @@ Solid.displayName = "Solid";
 addSequenceStackTraces(Solid);
 // src/HtmlInCanvas.tsx
 import {
-  createContext as createContext28,
+  createContext as createContext29,
   forwardRef as forwardRef9,
   useCallback as useCallback18,
-  useContext as useContext37,
+  useContext as useContext38,
   useLayoutEffect as useLayoutEffect12,
   useMemo as useMemo32,
   useRef as useRef23
@@ -11223,6 +11485,14 @@ var isHtmlInCanvasSupported = () => {
   cachedSupport = typeof ctx?.drawElementImage === "function" && typeof canvas.requestPaint === "function" && typeof canvas.captureElementImage === "function" && "transferControlToOffscreen" in HTMLCanvasElement.prototype;
   return cachedSupport;
 };
+var MINIMUM_CHROME_VERSION_FOR_NESTED_HTML_IN_CANVAS = 157;
+var isHtmlInCanvasNestingSupported = () => {
+  if (!isHtmlInCanvasSupported() || typeof navigator === "undefined") {
+    return false;
+  }
+  const chromeVersion = navigator.userAgent.match(/(?:Chrome|Chromium)\/(\d+)/)?.[1];
+  return chromeVersion !== undefined && Number(chromeVersion) >= MINIMUM_CHROME_VERSION_FOR_NESTED_HTML_IN_CANVAS;
+};
 var HTML_IN_CANVAS_UNSUPPORTED_MESSAGE = "HTML in Canvas requires Chrome 149 or newer with Canvas Draw Element enabled at chrome://flags/#canvas-draw-element.";
 var getHtmlInCanvasUnsupportedMessage = () => {
   if (typeof document === "undefined") {
@@ -11298,7 +11568,7 @@ var defaultOnPaint = ({
   ctx.reset();
   ctx.drawElementImage(elementImage, 0, 0);
 };
-var HtmlInCanvasAncestorContext = createContext28(false);
+var HtmlInCanvasAncestorContext = createContext29(false);
 var HtmlInCanvasContent = forwardRef9(({
   width,
   height,
@@ -11311,10 +11581,10 @@ var HtmlInCanvasContent = forwardRef9(({
   controls,
   style
 }, ref) => {
-  const isInsideAncestorHtmlInCanvas = useContext37(HtmlInCanvasAncestorContext);
+  const isInsideAncestorHtmlInCanvas = useContext38(HtmlInCanvasAncestorContext);
   assertHtmlInCanvasDimensions(width, height);
-  if (isInsideAncestorHtmlInCanvas) {
-    throw new Error("<HtmlInCanvas> components cannot be nested. Chrome does not reliably render nested HTML-in-canvas subtrees. Consider merging the effects into one <HtmlInCanvas> if you can.");
+  if (isInsideAncestorHtmlInCanvas && !isHtmlInCanvasNestingSupported()) {
+    throw new Error(`Nested <HtmlInCanvas> components require Chrome ${MINIMUM_CHROME_VERSION_FOR_NESTED_HTML_IN_CANVAS} or newer with HTML-in-canvas enabled.`);
   }
   const resolvedPixelDensity = resolveHtmlInCanvasPixelDensity(pixelDensity);
   const canvasWidth = Math.ceil(width * resolvedPixelDensity);
@@ -11690,7 +11960,8 @@ var HtmlInCanvasWrapped = withInteractivitySchema({
   supportsEffects: true
 });
 var HtmlInCanvas = Object.assign(HtmlInCanvasWrapped, {
-  isSupported: isHtmlInCanvasSupported
+  isSupported: isHtmlInCanvasSupported,
+  isNestingSupported: isHtmlInCanvasNestingSupported
 });
 HtmlInCanvas.displayName = "HtmlInCanvas";
 addSequenceStackTraces(HtmlInCanvas);
@@ -11698,7 +11969,7 @@ addSequenceStackTraces(HtmlInCanvas);
 import {
   forwardRef as forwardRef10,
   useCallback as useCallback19,
-  useContext as useContext38,
+  useContext as useContext39,
   useImperativeHandle as useImperativeHandle7,
   useLayoutEffect as useLayoutEffect13,
   useMemo as useMemo33,
@@ -11844,7 +12115,7 @@ var CanvasImageContent = forwardRef10(({
     effects,
     overrideId: controls?.overrideId ?? null
   });
-  const sequenceContext = useContext38(SequenceContext);
+  const sequenceContext = useContext39(SequenceContext);
   const pendingLoadDelayRef = useRef24(null);
   const [isLoadPending, setIsLoadPending] = useState16(false);
   const isPremounting = Boolean(sequenceContext?.premounting);
@@ -12249,7 +12520,7 @@ var IFrame = forwardRef11(IFrameRefForwarding);
 // src/Img.tsx
 import {
   useCallback as useCallback21,
-  useContext as useContext39,
+  useContext as useContext40,
   useLayoutEffect as useLayoutEffect14,
   useMemo as useMemo34,
   useRef as useRef25,
@@ -12276,7 +12547,7 @@ var ImgContent = ({
   const imageRef = useRef25(null);
   const errors = useRef25({});
   const { delayPlayback } = useBufferState();
-  const sequenceContext = useContext39(SequenceContext);
+  const sequenceContext = useContext40(SequenceContext);
   const [isLoading, setIsLoading] = useState18(false);
   const _propsValid = true;
   if (!_propsValid) {
@@ -12686,7 +12957,7 @@ var Img = withInteractivitySchema({
 });
 addSequenceStackTraces(Img);
 // src/Interactive.tsx
-import React35, { forwardRef as forwardRef12, useCallback as useCallback22, useContext as useContext40 } from "react";
+import React35, { forwardRef as forwardRef12, useCallback as useCallback22, useContext as useContext41 } from "react";
 import { jsx as jsx31 } from "react/jsx-runtime";
 var sourcePathToIdentityPrefix = (packageName) => {
   if (packageName === "remotion") {
@@ -12773,7 +13044,7 @@ var withSchema = (untypedOptions) => {
     ...rest
   } = options;
   const ComponentWrappedInSequence = forwardRef12((props2, ref) => {
-    const { canvasContent, compositions } = useContext40(CompositionManager);
+    const { canvasContent, compositions } = useContext41(CompositionManager);
     const componentIdentity = resolveComponentIdentity(Wrapped);
     const isCurrentComposition = compositions.some((composition) => canvasContent?.type === "composition" && composition.id === canvasContent.compositionId && composition.componentFromProps === componentIdentity);
     const {
@@ -13789,7 +14060,7 @@ var setupEnvVariables = () => {
 };
 
 // src/use-pixel-density.ts
-import React41, { useContext as useContext41 } from "react";
+import React41, { useContext as useContext42 } from "react";
 var PixelDensityContext = React41.createContext(null);
 var getBrowserPixelDensity = () => {
   if (typeof window === "undefined") {
@@ -13798,8 +14069,8 @@ var getBrowserPixelDensity = () => {
   return window.devicePixelRatio || 1;
 };
 var usePixelDensity = (options) => {
-  const pixelDensity = useContext41(PixelDensityContext);
-  const canUseRemotionHooks = useContext41(CanUseRemotionHooks);
+  const pixelDensity = useContext42(PixelDensityContext);
+  const canUseRemotionHooks = useContext42(CanUseRemotionHooks);
   if (pixelDensity !== null) {
     return pixelDensity;
   }
@@ -13821,7 +14092,7 @@ import { useCallback as useCallback26 } from "react";
 // src/video/OffthreadVideoForRendering.tsx
 import {
   useCallback as useCallback24,
-  useContext as useContext42,
+  useContext as useContext43,
   useEffect as useEffect18,
   useLayoutEffect as useLayoutEffect16,
   useMemo as useMemo37,
@@ -13864,10 +14135,10 @@ var OffthreadVideoForRendering = ({
   const frame = useCurrentFrame();
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior);
   const videoConfig = useUnsafeVideoConfig();
-  const sequenceContext = useContext42(SequenceContext);
+  const sequenceContext = useContext43(SequenceContext);
   const sequencePlaybackRate = sequenceContext?.playbackRate ?? 1;
-  const audioStartFrame = useContext42(Html5MediaTrimContext);
-  const { registerRenderAsset, unregisterRenderAsset } = useContext42(RenderAssetManager);
+  const audioStartFrame = useContext43(Html5MediaTrimContext);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext43(RenderAssetManager);
   if (!src) {
     throw new TypeError("No `src` was passed to <OffthreadVideo>.");
   }
@@ -14049,7 +14320,7 @@ var OffthreadVideoForRendering = ({
 import React43, {
   forwardRef as forwardRef13,
   useCallback as useCallback25,
-  useContext as useContext43,
+  useContext as useContext44,
   useEffect as useEffect20,
   useImperativeHandle as useImperativeHandle9,
   useMemo as useMemo38,
@@ -14105,7 +14376,7 @@ class MediaPlaybackError extends Error {
 // src/video/VideoForPreview.tsx
 import { jsx as jsx35 } from "react/jsx-runtime";
 var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
-  const context = useContext43(SharedAudioContext);
+  const context = useContext44(SharedAudioContext);
   if (!context) {
     throw new Error("SharedAudioContext not found");
   }
@@ -14162,7 +14433,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   }
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const { fps, durationInFrames } = useVideoConfig();
-  const parentSequence = useContext43(SequenceContext);
+  const parentSequence = useContext44(SequenceContext);
   const { isStudio } = useRemotionEnvironment();
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
@@ -14688,11 +14959,14 @@ var Internals = {
   CompositionSetters,
   VisualModePropStatusesContext,
   VisualModePropStatusesRefContext,
+  VisualModeBatchSettersContext,
   VisualModeDragOverridesContext,
   VisualModeSettersContext,
   SequenceManager,
   SequenceManagerProvider,
   SequenceManagerRefContext,
+  useActiveFromDragOverrideKeys,
+  useSequenceManagerSequences,
   SequenceRegistrationContext,
   DisableSequenceRegistrationProvider,
   CommitOrderInternals,
@@ -15122,12 +15396,12 @@ var Still = (props2) => {
 };
 addSequenceStackTraces(Still);
 // src/video/html5-video.tsx
-import { forwardRef as forwardRef16, useCallback as useCallback27, useContext as useContext45 } from "react";
+import { forwardRef as forwardRef16, useCallback as useCallback27, useContext as useContext46 } from "react";
 
 // src/video/VideoForRendering.tsx
 import {
   forwardRef as forwardRef15,
-  useContext as useContext44,
+  useContext as useContext45,
   useEffect as useEffect21,
   useImperativeHandle as useImperativeHandle10,
   useLayoutEffect as useLayoutEffect17,
@@ -15283,14 +15557,14 @@ var VideoForRenderingForwardFunction = ({
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const videoConfig = useUnsafeVideoConfig();
   const videoRef = useRef28(null);
-  const sequenceContext = useContext44(SequenceContext);
+  const sequenceContext = useContext45(SequenceContext);
   const sequencePlaybackRate = sequenceContext?.playbackRate ?? 1;
-  const audioStartFrame = useContext44(Html5MediaTrimContext);
+  const audioStartFrame = useContext45(Html5MediaTrimContext);
   const environment = useRemotionEnvironment();
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext44(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext45(RenderAssetManager);
   const id = useMemo41(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     props2.src,
     sequenceContext?.cumulatedFrom,
@@ -15508,7 +15782,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 } = useContext45(DurationsContext);
+  const { durations, setDurations } = useContext46(DurationsContext);
   if (typeof ref === "string") {
     throw new Error("string refs are not supported");
   }