@remotion/studio 4.0.372 → 4.0.374

package/dist/esm/{chunk-dbhfqh6h.js → chunk-df4kyjv3.js}

@@ -1,7 +1,7 @@
 import {
   __require,
   __toESM
-} from "./chunk-bgfkgcmg.js";
+} from "./chunk-6jf1natv.js";
 
 // src/Studio.tsx
 import { useLayoutEffect as useLayoutEffect2 } from "react";
@@ -970,11 +970,9 @@ var loadExpandedFolders = (type) => {
   return JSON.parse(item);
 };
 var ExpandedFoldersContext = createContext6({
-  toggleFolder: () => {
-  },
+  toggleFolder: () => {},
   foldersExpanded: {},
-  setFoldersExpanded: () => {
-  }
+  setFoldersExpanded: () => {}
 });
 
 // src/state/folders.tsx
@@ -4436,8 +4434,7 @@ var AskAiModal = () => {
         if (json.type === "cmd-i") {
           askAiModalRef.current?.toggle();
         }
-      } catch {
-      }
+      } catch {}
     };
     window.addEventListener("message", onMessage);
     return () => {
@@ -10339,8 +10336,7 @@ var getZodSchemaFromPrimitive = (value, z) => {
   let stringified;
   try {
     stringified = JSON.stringify(value);
-  } catch {
-  }
+  } catch {}
   throw new Error(`visualControl(): Specify a schema for this value: ${stringified ?? "[non-serializable value]"}. See https://remotion.dev/docs/studio/visual-control`);
 };
 
@@ -10458,8 +10454,7 @@ var VisualControlsProvider = ({ children }) => {
   const changedRef = useRef23(false);
   const env = useRemotionEnvironment();
   const visualControl = useCallback41(function(key, value, schema) {
-    if (handles && false) {
-    }
+    if (handles && false) {}
     if (!env.isStudio) {
       return value;
     }
@@ -10778,8 +10773,7 @@ var saveDefaultProps = async ({
   let zodTypes = null;
   try {
     zodTypes = await import("@remotion/zod-types");
-  } catch {
-  }
+  } catch {}
   const { generatedDefaultProps, composition } = calcNewProps(compositionId, defaultProps);
   const res = await callUpdateDefaultPropsApi(compositionId, generatedDefaultProps, composition.schema ? extractEnumJsonPaths({
     schema: composition.schema,
@@ -17621,7 +17615,7 @@ var loadPlaybackRate = () => {
 
 // src/components/PlaybackRatePersistor.tsx
 var PlaybackRatePersistor = () => {
-  const { setPlaybackRate, playbackRate } = useContext49(Internals40.Timeline.TimelineContext);
+  const { setPlaybackRate, playbackRate } = useContext49(Internals40.TimelineContext);
   useEffect54(() => {
     setPlaybackRate(loadPlaybackRate());
   }, [setPlaybackRate]);
@@ -17930,7 +17924,35 @@ var TimelineZoomControls = () => {
 import ReactDOM8 from "react-dom/client";
 import { Internals as Internals44 } from "remotion";
 import { jsx as jsx176 } from "react/jsx-runtime";
-var compose = ({
+var svgToImageBitmap = (svg) => {
+  const computedStyle = getComputedStyle(svg);
+  const { transform: originalTransform } = computedStyle;
+  svg.style.transform = "none";
+  const svgDimensions = svg.getBoundingClientRect();
+  svg.style.transform = originalTransform;
+  if (svgDimensions.width === 0 || svgDimensions.height === 0) {
+    return Promise.resolve(null);
+  }
+  const svgData = new XMLSerializer().serializeToString(svg);
+  return new Promise((resolve, reject) => {
+    const image = new Image(svgDimensions.width, svgDimensions.height);
+    const url = "data:image/svg+xml;base64," + window.btoa(svgData);
+    image.onload = function() {
+      resolve({
+        image,
+        width: svgDimensions.width,
+        height: svgDimensions.height,
+        left: svgDimensions.left,
+        top: svgDimensions.top
+      });
+    };
+    image.onerror = () => {
+      reject(new Error("Failed to convert SVG to image"));
+    };
+    image.src = url;
+  });
+};
+var compose = async ({
   composables,
   width,
   height
@@ -17941,7 +17963,15 @@ var compose = ({
     throw new Error("Could not get context");
   }
   for (const composable of composables) {
-    context.drawImage(composable, 0, 0);
+    if (composable.type === "canvas") {
+      const boundingClientRect = composable.element.getBoundingClientRect();
+      context.drawImage(composable.element, boundingClientRect.left, boundingClientRect.top);
+    } else if (composable.type === "svg") {
+      const imageBitmap = await svgToImageBitmap(composable.element);
+      if (imageBitmap) {
+        context.drawImage(imageBitmap.image, imageBitmap.left, imageBitmap.top);
+      }
+    }
   }
   return canvas;
 };
@@ -17950,86 +17980,75 @@ var findCanvasElements = (element) => {
   const composables = [];
   Array.from(canvasElements).forEach((canvasElement) => {
     const canvas = canvasElement;
-    composables.push(canvas);
+    composables.push({
+      type: "canvas",
+      element: canvas
+    });
   });
   return composables;
 };
-var waitForReady = (timeoutInMilliseconds) => {
+var findSvgElements = (element) => {
+  const svgElements = element.querySelectorAll("svg");
+  const composables = [];
+  Array.from(svgElements).forEach((svgElement) => {
+    const svg = svgElement;
+    composables.push({
+      type: "svg",
+      element: svg
+    });
+  });
+  return composables;
+};
+var waitForReady = (timeoutInMilliseconds, scope) => {
   const { promise, resolve, reject } = Promise.withResolvers();
   const start = Date.now();
   const interval = setInterval(() => {
-    if (window.remotion_renderReady === true) {
+    if (scope.remotion_renderReady === true) {
       resolve(true);
       clearInterval(interval);
       return;
     }
-    if (window.remotion_cancelledError !== undefined) {
-      reject(window.remotion_cancelledError);
+    if (scope.remotion_cancelledError !== undefined) {
+      reject(scope.remotion_cancelledError);
       clearInterval(interval);
       return;
     }
     if (Date.now() - start > timeoutInMilliseconds + 3000) {
-      reject(new Error(Object.values(window.remotion_delayRenderTimeouts).map((d) => d.label).join(", ")));
+      reject(new Error(Object.values(scope.remotion_delayRenderTimeouts).map((d) => d.label).join(", ")));
       clearInterval(interval);
     }
   }, 50);
   return promise;
 };
-var renderStillOnWeb = async ({
+var COMP_ID = "markup";
+var internalRenderStillOnWeb = async ({
   Component,
   width,
   height,
   fps,
   durationInFrames,
-  frame: frame2
+  frame: frame2,
+  delayRenderTimeoutInMilliseconds,
+  logLevel
 }) => {
   const div = document.createElement("div");
   div.style.display = "flex";
   div.style.backgroundColor = "transparent";
-  div.style.position = "absolute";
+  div.style.position = "fixed";
   div.style.width = `${width}px`;
   div.style.height = `${height}px`;
+  div.style.zIndex = "-9999";
   document.body.appendChild(div);
-  const delayRenderTimeoutInMilliseconds = 1e4;
   if (!ReactDOM8.createRoot) {
     throw new Error("@remotion/web-renderer requires React 18 or higher");
   }
-  const compositionManagerContext = {
-    currentCompositionMetadata: {
-      durationInFrames,
-      fps,
-      height,
-      width,
-      props: {},
-      defaultCodec: null,
-      defaultOutName: null,
-      defaultVideoImageFormat: null,
-      defaultPixelFormat: null,
-      defaultProResProfile: null
-    },
-    folders: [],
-    compositions: [
-      {
-        id: "markup",
-        component: Component,
-        nonce: 0,
-        defaultProps: undefined,
-        folderName: null,
-        parentFolderName: null,
-        schema: null,
-        calculateMetadata: null,
-        durationInFrames,
-        fps,
-        height,
-        width
-      }
-    ],
-    canvasContent: {
-      type: "composition",
-      compositionId: "markup"
-    }
-  };
   const root = ReactDOM8.createRoot(div);
+  const delayRenderScope = {
+    remotion_renderReady: true,
+    remotion_delayRenderTimeouts: {},
+    remotion_puppeteerTimeout: delayRenderTimeoutInMilliseconds,
+    remotion_attempt: 0
+  };
   root.render(/* @__PURE__ */ jsx176(Internals44.RemotionEnvironmentContext, {
     value: {
       isStudio: false,
@@ -18038,54 +18057,80 @@ var renderStillOnWeb = async ({
       isReadOnlyStudio: false,
       isClientSideRendering: true
     },
-    children: /* @__PURE__ */ jsx176(Internals44.RemotionRoot, {
-      audioEnabled: true,
-      videoEnabled: true,
-      logLevel: "info",
-      numberOfAudioTags: 0,
-      onlyRenderComposition: null,
-      currentCompositionMetadata: {
-        props: {},
-        durationInFrames,
-        fps,
-        height,
-        width,
-        defaultCodec: null,
-        defaultOutName: null,
-        defaultVideoImageFormat: null,
-        defaultPixelFormat: null,
-        defaultProResProfile: null
-      },
-      audioLatencyHint: "interactive",
-      children: /* @__PURE__ */ jsx176(Internals44.CanUseRemotionHooks, {
-        value: true,
-        children: /* @__PURE__ */ jsx176(Internals44.CompositionManager.Provider, {
-          value: compositionManagerContext,
-          children: /* @__PURE__ */ jsx176(Component, {})
+    children: /* @__PURE__ */ jsx176(Internals44.DelayRenderContextType.Provider, {
+      value: delayRenderScope,
+      children: /* @__PURE__ */ jsx176(Internals44.CompositionManagerProvider, {
+        initialCanvasContent: {
+          type: "composition",
+          compositionId: COMP_ID
+        },
+        onlyRenderComposition: null,
+        currentCompositionMetadata: {
+          props: {},
+          durationInFrames,
+          fps,
+          height,
+          width,
+          defaultCodec: null,
+          defaultOutName: null,
+          defaultVideoImageFormat: null,
+          defaultPixelFormat: null,
+          defaultProResProfile: null
+        },
+        initialCompositions: [
+          {
+            id: COMP_ID,
+            component: Component,
+            nonce: 0,
+            defaultProps: undefined,
+            folderName: null,
+            parentFolderName: null,
+            schema: null,
+            calculateMetadata: null,
+            durationInFrames,
+            fps,
+            height,
+            width
+          }
+        ],
+        children: /* @__PURE__ */ jsx176(Internals44.RemotionRoot, {
+          audioEnabled: false,
+          videoEnabled: true,
+          logLevel,
+          numberOfAudioTags: 0,
+          audioLatencyHint: "interactive",
+          frameState: {
+            [COMP_ID]: frame2
+          },
+          children: /* @__PURE__ */ jsx176(Internals44.CanUseRemotionHooks, {
+            value: true,
+            children: /* @__PURE__ */ jsx176(Component, {})
+          })
         })
       })
     })
   }));
-  window.remotion_setFrame(frame2, "markup", frame2);
-  await waitForReady(delayRenderTimeoutInMilliseconds);
+  await waitForReady(delayRenderTimeoutInMilliseconds, delayRenderScope);
   const canvasElements = findCanvasElements(div);
-  const composed = compose({
-    composables: canvasElements,
+  const svgElements = findSvgElements(div);
+  const composed = await compose({
+    composables: [...canvasElements, ...svgElements],
     width,
     height
   });
   const imageData = await composed.convertToBlob({
     type: "image/png"
   });
-  const blob = new Blob([imageData], { type: "image/png" });
-  const url = URL.createObjectURL(blob);
-  const a = document.createElement("a");
-  a.href = url;
-  a.download = "composed.png";
-  a.click();
-  URL.revokeObjectURL(url);
   root.unmount();
   div.remove();
+  return imageData;
+};
+var renderStillOnWeb = (options) => {
+  return internalRenderStillOnWeb({
+    ...options,
+    delayRenderTimeoutInMilliseconds: options.delayRenderTimeoutInMilliseconds ?? 30000,
+    logLevel: options.logLevel ?? "info"
+  });
 };
 
 // src/components/WebRender/TriggerWebRender.tsx
@@ -18112,6 +18157,13 @@ var TriggerWebRender = () => {
       fps: video.fps,
       durationInFrames: video.durationInFrames,
       frame: frame2
+    }).then((blob) => {
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = "composed.png";
+      a.click();
+      URL.revokeObjectURL(url);
     });
   }, [video, frame2]);
   return /* @__PURE__ */ jsx177(Button, {
@@ -18174,7 +18226,7 @@ var padding2 = {
   width: TIMELINE_PADDING
 };
 var PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
-  const { playbackRate, setPlaybackRate } = useContext53(Internals46.Timeline.TimelineContext);
+  const { playbackRate, setPlaybackRate } = useContext53(Internals46.TimelineContext);
   const { mediaMuted } = useContext53(Internals46.MediaVolumeContext);
   const { setMediaMuted } = useContext53(Internals46.SetMediaVolumeContext);
   const isVideoComposition = useIsVideoComposition();
@@ -20455,7 +20507,7 @@ import { Internals as Internals52 } from "remotion";
 var lastTimelinePositionWhileScrolling = null;
 var TimelinePlayCursorSyncer = () => {
   const video = Internals52.useVideo();
-  const timelineContext = useContext65(Internals52.Timeline.TimelineContext);
+  const timelineContext = useContext65(Internals52.TimelineContext);
   const timelinePosition = Internals52.Timeline.useTimelinePosition();
   const { canvasContent } = useContext65(Internals52.CompositionManager);
   const { zoom: zoomMap } = useContext65(TimelineZoomCtx);
@@ -24514,8 +24566,7 @@ class IsobmffDemuxer extends Demuxer {
       for (let i = 0;i < sampleTable.presentationTimestamps.length; i++) {
         sampleTable.presentationTimestampIndexMap[sampleTable.presentationTimestamps[i].sampleIndex] = i;
       }
-    } else {
-    }
+    } else {}
     return sampleTable;
   }
   async readFragment(startPos) {
@@ -24547,8 +24598,7 @@ class IsobmffDemuxer extends Demuxer {
           if (lastCacheIndex !== -1) {
             const lastCache = fragmentPositionCache[lastCacheIndex];
             offsetFragmentTrackDataByTimestamp(trackData, lastCache.endTimestamp);
-          } else {
-          }
+          } else {}
         }
         trackData.startTimestampIsFinal = true;
       }
@@ -24854,13 +24904,11 @@ class IsobmffDemuxer extends Demuxer {
               slice.skip(4 + 4 + 4 + 2 + 32 + 2 + 2);
               this.readContiguousBoxes(slice.slice(slice.filePos, sampleBoxStartPos + sampleBoxInfo.totalSize - slice.filePos));
             } else {
-              if (lowercaseBoxName === "mp4a") {
-              } else if (lowercaseBoxName === "opus") {
+              if (lowercaseBoxName === "mp4a") {} else if (lowercaseBoxName === "opus") {
                 track.info.codec = "opus";
               } else if (lowercaseBoxName === "flac") {
                 track.info.codec = "flac";
-              } else if (lowercaseBoxName === "twos" || lowercaseBoxName === "sowt" || lowercaseBoxName === "raw " || lowercaseBoxName === "in24" || lowercaseBoxName === "in32" || lowercaseBoxName === "fl32" || lowercaseBoxName === "fl64" || lowercaseBoxName === "lpcm" || lowercaseBoxName === "ipcm" || lowercaseBoxName === "fpcm") {
-              } else if (lowercaseBoxName === "ulaw") {
+              } else if (lowercaseBoxName === "twos" || lowercaseBoxName === "sowt" || lowercaseBoxName === "raw " || lowercaseBoxName === "in24" || lowercaseBoxName === "in32" || lowercaseBoxName === "fl32" || lowercaseBoxName === "fl64" || lowercaseBoxName === "lpcm" || lowercaseBoxName === "ipcm" || lowercaseBoxName === "fpcm") {} else if (lowercaseBoxName === "ulaw") {
                 track.info.codec = "ulaw";
               } else if (lowercaseBoxName === "alaw") {
                 track.info.codec = "alaw";
@@ -26996,8 +27044,7 @@ class MatroskaDemuxer extends Demuxer {
       if (!segment.metadataTagsCollected) {
         if (this.reader.fileSize !== null) {
           await this.loadSegmentMetadata(segment);
-        } else {
-        }
+        } else {}
         segment.metadataTagsCollected = true;
       }
     }
@@ -27264,8 +27311,7 @@ class MatroskaDemuxer extends Demuxer {
           if (track.defaultDuration != null) {
             if (currentBlock.lacing === BlockLacing.None) {
               currentBlock.duration = track.defaultDuration;
-            } else {
-            }
+            } else {}
           }
         }
       }
@@ -27401,9 +27447,7 @@ class MatroskaDemuxer extends Demuxer {
   }
   async loadSegmentMetadata(segment) {
     for (const seekEntry of segment.seekEntries) {
-      if (seekEntry.id === EBMLId.Tags && !segment.tagsSeen) {
-      } else if (seekEntry.id === EBMLId.Attachments && !segment.attachmentsSeen) {
-      } else {
+      if (seekEntry.id === EBMLId.Tags && !segment.tagsSeen) {} else if (seekEntry.id === EBMLId.Attachments && !segment.attachmentsSeen) {} else {
         continue;
       }
       let slice = this.reader.requestSliceRange(segment.dataStartPos + seekEntry.segmentPosition, MIN_HEADER_SIZE, MAX_HEADER_SIZE);
@@ -27826,8 +27870,7 @@ class MatroskaDemuxer extends Demuxer {
           const flippedRotation = -rotation;
           try {
             this.currentTrack.info.rotation = normalizeRotation(flippedRotation);
-          } catch {
-          }
+          } catch {}
         }
         ;
         break;
@@ -28297,16 +28340,14 @@ class MatroskaDemuxer extends Demuxer {
                 ;
                 break;
               default:
-                {
-                }
+                {}
                 ;
             }
           }
           ;
           break;
         default:
-          {
-          }
+          {}
           ;
       }
     }
@@ -31821,6 +31862,12 @@ class FlacDemuxer extends Demuxer {
           slice.skip(-1);
           continue;
         }
+        if (nextIsLegit.num - frameHeader.num !== 1) {
+          console.log("skipping", nextIsLegit.num, frameHeader.num);
+          slice.skip(-1);
+          continue;
+        }
+        console.log(frameHeader.num, nextIsLegit.num, slice.filePos);
         return {
           num: frameHeader.num,
           blockSize: frameHeader.blockSize,
@@ -32409,8 +32456,7 @@ var DEFAULT_RETRY_DELAY = (previousAttempts, error, src) => {
       if (typeof window !== "undefined" && typeof window.location !== "undefined") {
         originOfSrc = new URL(src instanceof Request ? src.url : src, window.location.href).origin;
       }
-    } catch {
-    }
+    } catch {}
     const isOnline = typeof navigator !== "undefined" && typeof navigator.onLine === "boolean" ? navigator.onLine : true;
     if (isOnline && originOfSrc !== null && originOfSrc !== window.location.origin) {
       return null;
@@ -32487,7 +32533,7 @@ class UrlSource extends Source {
     return this._orchestrator.read(start, end);
   }
   async _runWorker(worker) {
-    while (true) {
+    while (!worker.aborted) {
       const existing = this._existingResponses.get(worker);
       this._existingResponses.delete(worker);
       let abortController = existing?.abortController;
@@ -32536,9 +32582,6 @@ class UrlSource extends Source {
             throw error;
           }
         }
-        if (worker.aborted) {
-          break;
-        }
         const { done, value } = readResult;
         if (done) {
           this._orchestrator.forgetWorker(worker);
@@ -32551,9 +32594,6 @@ class UrlSource extends Source {
         this.onread?.(worker.currentPos, worker.currentPos + value.length);
         this._orchestrator.supplyWorkerData(worker, value);
       }
-      if (worker.aborted) {
-        break;
-      }
     }
     worker.running = false;
   }
@@ -32736,8 +32776,7 @@ class ReadOrchestrator {
         view: toDataView(bytes2),
         offset: innerStart
       }));
-    } else {
-    }
+    } else {}
     return result;
   }
   createWorker(startPos, targetPos) {
@@ -32746,7 +32785,7 @@ class ReadOrchestrator {
       currentPos: startPos,
       targetPos,
       running: false,
-      aborted: this.disposed,
+      aborted: false,
       pendingSlices: [],
       age: this.nextAge++
     };
@@ -32785,7 +32824,9 @@ class ReadOrchestrator {
     });
   }
   supplyWorkerData(worker, bytes) {
-    assert(!worker.aborted);
+    if (this.disposed) {
+      return;
+    }
     const start = worker.currentPos;
     const end = start + bytes.length;
     this.insertIntoCache({
@@ -33280,8 +33321,7 @@ var useMaxMediaDuration = (s, fps) => {
         const durationOrInfinity = metadata.durationInSeconds ?? Infinity;
         cache.set(src, Math.floor(durationOrInfinity * fps));
         setMaxMediaDuration(Math.floor(durationOrInfinity * fps));
-      }).catch(() => {
-      });
+      }).catch(() => {});
     });
     return () => {
       input2.dispose();
@@ -33573,7 +33613,7 @@ import { useVideoConfig as useVideoConfig5 } from "remotion";
 async function extractFrames({
   src,
   timestampsInSeconds,
-  onFrame,
+  onVideoSample,
   signal
 }) {
   const input2 = new Input({
@@ -33614,8 +33654,7 @@ async function extractFrames({
       if (!videoSample) {
         continue;
       }
-      const videoFrame = videoSample.toVideoFrame();
-      onFrame(videoFrame);
+      onVideoSample(videoSample);
     }
   } catch (error) {
     if (error instanceof InputDisposedError) {
@@ -33631,11 +33670,15 @@ async function extractFrames({
 }
 
 // src/helpers/frame-database.ts
-var makeFrameDatabaseKey = (src, timestamp) => `${src}|${timestamp}`;
+var KEY_SEPARATOR = "|";
+var makeFrameDatabaseKey = (src, timestamp) => `${src}${KEY_SEPARATOR}${timestamp}`;
+var getFrameDatabaseKeyPrefix = (src) => {
+  return `${src}${KEY_SEPARATOR}`;
+};
 var frameDatabase = new Map;
 var aspectRatioCache = new Map;
 var getTimestampFromFrameDatabaseKey = (key4) => {
-  const split = key4.split("|");
+  const split = key4.split(KEY_SEPARATOR);
   return Number(split[split.length - 1]);
 };
 var getAspectRatioFromCache = (src) => {
@@ -33656,6 +33699,19 @@ var clearOldFrames = () => {
     frameDatabase.delete(key4);
   }
 };
+var clearFramesForSrc = (src) => {
+  const keysToRemove = [];
+  const prefix = getFrameDatabaseKeyPrefix(src);
+  for (const [key4, frame2] of frameDatabase.entries()) {
+    if (key4.startsWith(prefix)) {
+      frame2.frame.close();
+      keysToRemove.push(key4);
+    }
+  }
+  for (const key4 of keysToRemove) {
+    frameDatabase.delete(key4);
+  }
+};
 
 // src/helpers/resize-video-frame.ts
 var calculateNewDimensionsFromScale = ({
@@ -33797,7 +33853,8 @@ var fillWithCachedFrames = ({
   segmentDuration,
   fromSeconds
 }) => {
-  const keys = Array.from(frameDatabase.keys()).filter((k) => k.startsWith(src));
+  const prefix = getFrameDatabaseKeyPrefix(src);
+  const keys = Array.from(frameDatabase.keys()).filter((k) => k.startsWith(prefix));
   const targets = Array.from(filledSlots.keys());
   for (const timestamp of targets) {
     let bestKey;
@@ -33866,6 +33923,11 @@ var TimelineVideoInfo = ({ src, visualizationWidth, startFrom, durationInFrames
   const ref = useRef37(null);
   const [error, setError] = useState67(null);
   const aspectRatio = useRef37(getAspectRatioFromCache(src));
+  useEffect67(() => {
+    return () => {
+      clearFramesForSrc(src);
+    };
+  }, [src]);
   useEffect67(() => {
     if (error) {
       return;
@@ -33927,7 +33989,8 @@ var TimelineVideoInfo = ({ src, visualizationWidth, startFrom, durationInFrames
         return Array.from(filledSlots.keys()).map((timestamp) => timestamp / WEBCODECS_TIMESCALE);
       },
       src,
-      onFrame: (frame2) => {
+      onVideoSample: (sample) => {
+        const frame2 = sample.toVideoFrame();
         const scale = HEIGHT / frame2.displayHeight * window.devicePixelRatio;
         const transformed = resizeVideoFrame({
           frame: frame2,
@@ -42411,23 +42474,28 @@ var Studio = ({ rootComponent, readOnly }) => {
   useLayoutEffect2(() => {
     injectCSS();
   }, []);
-  return /* @__PURE__ */ jsx274(Internals67.RemotionRoot, {
-    audioEnabled: window.remotion_audioEnabled,
-    videoEnabled: window.remotion_videoEnabled,
-    logLevel: window.remotion_logLevel,
-    numberOfAudioTags: window.remotion_numberOfAudioTags,
+  return /* @__PURE__ */ jsx274(Internals67.CompositionManagerProvider, {
     onlyRenderComposition: null,
     currentCompositionMetadata: null,
-    audioLatencyHint: window.remotion_audioLatencyHint ?? "interactive",
-    children: /* @__PURE__ */ jsxs141(EditorContexts, {
-      readOnlyStudio: readOnly,
-      children: [
-        /* @__PURE__ */ jsx274(Editor, {
-          readOnlyStudio: readOnly,
-          Root: rootComponent
-        }),
-        readOnly ? null : createPortal(/* @__PURE__ */ jsx274(ServerDisconnected, {}), getServerDisconnectedDomElement())
-      ]
+    initialCompositions: [],
+    initialCanvasContent: null,
+    children: /* @__PURE__ */ jsx274(Internals67.RemotionRoot, {
+      frameState: null,
+      audioEnabled: window.remotion_audioEnabled,
+      videoEnabled: window.remotion_videoEnabled,
+      logLevel: window.remotion_logLevel,
+      numberOfAudioTags: window.remotion_numberOfAudioTags,
+      audioLatencyHint: window.remotion_audioLatencyHint ?? "interactive",
+      children: /* @__PURE__ */ jsxs141(EditorContexts, {
+        readOnlyStudio: readOnly,
+        children: [
+          /* @__PURE__ */ jsx274(Editor, {
+            readOnlyStudio: readOnly,
+            Root: rootComponent
+          }),
+          readOnly ? null : createPortal(/* @__PURE__ */ jsx274(ServerDisconnected, {}), getServerDisconnectedDomElement())
+        ]
+      })
     })
   });
 };