remotion 4.0.441 → 4.0.443

package/dist/esm/index.mjs

@@ -32,27 +32,86 @@ var Clipper = () => {
   throw new Error("<Clipper> has been removed as of Remotion v4.0.228. The native clipping APIs were experimental and subject to removal at any time. We removed them because they were sparingly used and made rendering often slower rather than faster.");
 };
 
-// src/enable-sequence-stack-traces.ts
-var componentsToAddStacksTo = [];
-var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
-var addSequenceStackTraces = (component) => {
-  componentsToAddStacksTo.push(component);
-};
+// src/Composition.tsx
+import { Suspense, useContext as useContext9, useEffect as useEffect2 } from "react";
+import { createPortal } from "react-dom";
 
-// src/is-player.tsx
-import { createContext as createContext2, useContext } from "react";
+// src/CanUseRemotionHooks.tsx
+import { createContext as createContext2 } from "react";
 import { jsx } from "react/jsx-runtime";
-var IsPlayerContext = createContext2(false);
-var IsPlayerContextProvider = ({
-  children
-}) => {
-  return /* @__PURE__ */ jsx(IsPlayerContext.Provider, {
+var CanUseRemotionHooks = createContext2(false);
+var CanUseRemotionHooksProvider = ({ children }) => {
+  return /* @__PURE__ */ jsx(CanUseRemotionHooks.Provider, {
     value: true,
     children
   });
 };
-var useIsPlayer = () => {
-  return useContext(IsPlayerContext);
+
+// src/CompositionManagerContext.tsx
+import { createContext as createContext3 } from "react";
+var CompositionManager = createContext3({
+  compositions: [],
+  folders: [],
+  currentCompositionMetadata: null,
+  canvasContent: null
+});
+var CompositionSetters = createContext3({
+  registerComposition: () => {
+    return;
+  },
+  unregisterComposition: () => {
+    return;
+  },
+  registerFolder: () => {
+    return;
+  },
+  unregisterFolder: () => {
+    return;
+  },
+  setCanvasContent: () => {
+    return;
+  },
+  onlyRenderComposition: null
+});
+
+// src/Folder.tsx
+import { createContext as createContext5, useContext as useContext2, useEffect, useMemo as useMemo2 } from "react";
+
+// src/nonce.ts
+import { createContext as createContext4, useCallback, useContext, useMemo, useRef } from "react";
+var NonceContext = createContext4({
+  getNonce: () => 0
+});
+var fastRefreshNonce = 0;
+try {
+  if (typeof __webpack_module__ !== "undefined") {
+    if (__webpack_module__.hot) {
+      __webpack_module__.hot.addStatusHandler((status) => {
+        if (status === "idle") {
+          fastRefreshNonce++;
+        }
+      });
+    }
+  }
+} catch {}
+var useNonce = () => {
+  const context = useContext(NonceContext);
+  const nonce = context.getNonce();
+  const nonceRef = useRef(nonce);
+  nonceRef.current = nonce;
+  const history = useRef([[fastRefreshNonce, nonce]]);
+  const get = useCallback(() => {
+    if (fastRefreshNonce !== history.current[history.current.length - 1][0]) {
+      history.current = [
+        ...history.current,
+        [fastRefreshNonce, nonceRef.current]
+      ];
+    }
+    return history.current;
+  }, [history]);
+  return useMemo(() => {
+    return { get };
+  }, [get]);
 };
 
 // src/truthy.ts
@@ -60,55 +119,163 @@ function truthy(value) {
   return Boolean(value);
 }
 
-// src/version.ts
-var VERSION = "4.0.441";
-
-// src/multiple-versions-warning.ts
-var checkMultipleRemotionVersions = () => {
-  if (typeof globalThis === "undefined") {
-    return;
+// src/validation/validate-folder-name.ts
+var getRegex = () => /^([a-zA-Z0-9-\u4E00-\u9FFF])+$/g;
+var isFolderNameValid = (name) => name.match(getRegex());
+var validateFolderName = (name) => {
+  if (name === undefined || name === null) {
+    throw new TypeError("You must pass a name to a <Folder />.");
   }
-  const set = () => {
-    globalThis.remotion_imported = VERSION;
-    if (typeof window !== "undefined") {
-      window.remotion_imported = VERSION;
-    }
+  if (typeof name !== "string") {
+    throw new TypeError(`The "name" you pass into <Folder /> must be a string. Got: ${typeof name}`);
+  }
+  if (!isFolderNameValid(name)) {
+    throw new Error(`Folder name can only contain a-z, A-Z, 0-9 and -. You passed ${name}`);
+  }
+};
+var invalidFolderNameErrorMessage = `Folder name must match ${String(getRegex())}`;
+
+// src/Folder.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var FolderContext = createContext5({
+  folderName: null,
+  parentName: null
+});
+var Folder = ({ name, children }) => {
+  const parent = useContext2(FolderContext);
+  const { registerFolder, unregisterFolder } = useContext2(CompositionSetters);
+  const nonce = useNonce();
+  validateFolderName(name);
+  const parentNameArr = [parent.parentName, parent.folderName].filter(truthy);
+  const parentName = parentNameArr.length === 0 ? null : parentNameArr.join("/");
+  const value = useMemo2(() => {
+    return {
+      folderName: name,
+      parentName
+    };
+  }, [name, parentName]);
+  useEffect(() => {
+    registerFolder(name, parentName, nonce.get());
+    return () => {
+      unregisterFolder(name, parentName);
+    };
+  }, [
+    name,
+    parent.folderName,
+    parentName,
+    registerFolder,
+    unregisterFolder,
+    nonce
+  ]);
+  return /* @__PURE__ */ jsx2(FolderContext.Provider, {
+    value,
+    children
+  });
+};
+
+// src/get-remotion-environment.ts
+function getNodeEnvString() {
+  return ["NOD", "E_EN", "V"].join("");
+}
+var getEnvString = () => {
+  return ["e", "nv"].join("");
+};
+var getRemotionEnvironment = () => {
+  const isPlayer = typeof window !== "undefined" && window.remotion_isPlayer;
+  const isRendering = typeof window !== "undefined" && typeof window.process !== "undefined" && typeof window.process.env !== "undefined" && (window.process[getEnvString()][getNodeEnvString()] === "test" || window.process[getEnvString()][getNodeEnvString()] === "production" && typeof window !== "undefined" && typeof window.remotion_puppeteerTimeout !== "undefined");
+  const isStudio = typeof window !== "undefined" && window.remotion_isStudio;
+  const isReadOnlyStudio = typeof window !== "undefined" && window.remotion_isReadOnlyStudio;
+  return {
+    isStudio,
+    isRendering,
+    isPlayer,
+    isReadOnlyStudio,
+    isClientSideRendering: false
   };
-  const alreadyImported = globalThis.remotion_imported || typeof window !== "undefined" && window.remotion_imported;
-  if (alreadyImported) {
-    if (alreadyImported === VERSION) {
-      return;
+};
+
+// src/input-props-serialization.ts
+var DATE_TOKEN = "remotion-date:";
+var FILE_TOKEN = "remotion-file:";
+var serializeJSONWithSpecialTypes = ({
+  data,
+  indent,
+  staticBase
+}) => {
+  let customDateUsed = false;
+  let customFileUsed = false;
+  let mapUsed = false;
+  let setUsed = false;
+  try {
+    const serializedString = JSON.stringify(data, function(key, value) {
+      const item = this[key];
+      if (item instanceof Date) {
+        customDateUsed = true;
+        return `${DATE_TOKEN}${item.toISOString()}`;
+      }
+      if (item instanceof Map) {
+        mapUsed = true;
+        return value;
+      }
+      if (item instanceof Set) {
+        setUsed = true;
+        return value;
+      }
+      if (typeof item === "string" && staticBase !== null && item.startsWith(staticBase)) {
+        customFileUsed = true;
+        return `${FILE_TOKEN}${item.replace(staticBase + "/", "")}`;
+      }
+      return value;
+    }, indent);
+    return { serializedString, customDateUsed, customFileUsed, mapUsed, setUsed };
+  } catch (err) {
+    throw new Error("Could not serialize the passed input props to JSON: " + err.message);
+  }
+};
+var deserializeJSONWithSpecialTypes = (data) => {
+  return JSON.parse(data, (_, value) => {
+    if (typeof value === "string" && value.startsWith(DATE_TOKEN)) {
+      return new Date(value.replace(DATE_TOKEN, ""));
     }
-    if (typeof alreadyImported === "string" && alreadyImported.includes("webcodecs")) {
-      set();
-      return;
+    if (typeof value === "string" && value.startsWith(FILE_TOKEN)) {
+      return `${window.remotion_staticBase}/${value.replace(FILE_TOKEN, "")}`;
     }
-    throw new TypeError(`\uD83D\uDEA8 Multiple versions of Remotion detected: ${[
-      VERSION,
-      typeof alreadyImported === "string" ? alreadyImported : "an older version"
-    ].filter(truthy).join(" and ")}. This will cause things to break in an unexpected way.
-Check that all your Remotion packages are on the same version. If your dependencies depend on Remotion, make them peer dependencies. You can also run \`npx remotion versions\` from your terminal to see which versions are mismatching.`);
+    return value;
+  });
+};
+var serializeThenDeserialize = (props) => {
+  return deserializeJSONWithSpecialTypes(serializeJSONWithSpecialTypes({
+    data: props,
+    indent: 2,
+    staticBase: window.remotion_staticBase
+  }).serializedString);
+};
+var serializeThenDeserializeInStudio = (props) => {
+  if (getRemotionEnvironment().isStudio) {
+    return serializeThenDeserialize(props);
   }
-  set();
+  return props;
 };
 
-// src/Null.tsx
-var Null = () => {
-  throw new Error("<Null> has been removed as of Remotion v4.0.228. The native clipping APIs were experimental and subject to removal at any time. We removed them because they were sparingly used and made rendering often slower rather than faster.");
+// src/is-player.tsx
+import { createContext as createContext6, useContext as useContext3 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var IsPlayerContext = createContext6(false);
+var IsPlayerContextProvider = ({
+  children
+}) => {
+  return /* @__PURE__ */ jsx3(IsPlayerContext.Provider, {
+    value: true,
+    children
+  });
+};
+var useIsPlayer = () => {
+  return useContext3(IsPlayerContext);
 };
-
-// src/Sequence.tsx
-import {
-  forwardRef as forwardRef2,
-  useContext as useContext13,
-  useEffect,
-  useMemo as useMemo11,
-  useState as useState4
-} from "react";
 
 // src/AbsoluteFill.tsx
-import { forwardRef, useMemo } from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { forwardRef, useMemo as useMemo3 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var hasTailwindClassName = ({
   className,
   classPrefix,
@@ -131,7 +298,7 @@ var hasTailwindClassName = ({
 };
 var AbsoluteFillRefForwarding = (props, ref) => {
   const { style, ...other } = props;
-  const actualStyle = useMemo(() => {
+  const actualStyle = useMemo3(() => {
     return {
       position: "absolute",
       top: hasTailwindClassName({
@@ -194,7 +361,7 @@ var AbsoluteFillRefForwarding = (props, ref) => {
       ...style
     };
   }, [other.className, style]);
-  return /* @__PURE__ */ jsx2("div", {
+  return /* @__PURE__ */ jsx4("div", {
     ref,
     style: actualStyle,
     ...other
@@ -202,114 +369,379 @@ var AbsoluteFillRefForwarding = (props, ref) => {
 };
 var AbsoluteFill = forwardRef(AbsoluteFillRefForwarding);
 
-// src/freeze.tsx
-import { useContext as useContext11, useMemo as useMemo8 } from "react";
-
-// src/SequenceContext.tsx
-import { createContext as createContext3 } from "react";
-var SequenceContext = createContext3(null);
-
-// src/timeline-position-state.ts
-var exports_timeline_position_state = {};
-__export(exports_timeline_position_state, {
-  useTimelineSetFrame: () => useTimelineSetFrame,
-  useTimelinePosition: () => useTimelinePosition,
-  useTimelineContext: () => useTimelineContext,
-  usePlayingState: () => usePlayingState,
-  useAbsoluteTimelinePosition: () => useAbsoluteTimelinePosition,
-  persistCurrentFrame: () => persistCurrentFrame,
-  getInitialFrameState: () => getInitialFrameState,
-  getFrameForComposition: () => getFrameForComposition
-});
-import { useContext as useContext7, useMemo as useMemo6 } from "react";
+// src/loading-indicator.tsx
+import { jsx as jsx5, jsxs } from "react/jsx-runtime";
+var rotate = {
+  transform: `rotate(90deg)`
+};
+var ICON_SIZE = 40;
+var label = {
+  color: "white",
+  fontSize: 14,
+  fontFamily: "sans-serif"
+};
+var container = {
+  justifyContent: "center",
+  alignItems: "center"
+};
+var Loading = () => {
+  return /* @__PURE__ */ jsxs(AbsoluteFill, {
+    style: container,
+    id: "remotion-comp-loading",
+    children: [
+      /* @__PURE__ */ jsx5("style", {
+        type: "text/css",
+        children: `
+				@keyframes anim {
+					from {
+						opacity: 0
+					}
+					to {
+						opacity: 1
+					}
+				}
+				#remotion-comp-loading {
+					animation: anim 2s;
+					animation-fill-mode: forwards;
+				}
+			`
+      }),
+      /* @__PURE__ */ jsx5("svg", {
+        width: ICON_SIZE,
+        height: ICON_SIZE,
+        viewBox: "-100 -100 400 400",
+        style: rotate,
+        children: /* @__PURE__ */ jsx5("path", {
+          fill: "#555",
+          stroke: "#555",
+          strokeWidth: "100",
+          strokeLinejoin: "round",
+          d: "M 2 172 a 196 100 0 0 0 195 5 A 196 240 0 0 0 100 2.259 A 196 240 0 0 0 2 172 z"
+        })
+      }),
+      /* @__PURE__ */ jsxs("p", {
+        style: label,
+        children: [
+          "Resolving ",
+          "<Suspense>",
+          "..."
+        ]
+      })
+    ]
+  });
+};
 
-// src/TimelineContext.tsx
-import {
-  createContext as createContext6,
-  useLayoutEffect,
-  useMemo as useMemo2,
-  useRef,
-  useState as useState2
-} from "react";
+// src/portal-node.ts
+var _portalNode = null;
+var portalNode = () => {
+  if (!_portalNode) {
+    if (typeof document === "undefined") {
+      throw new Error("Tried to call an API that only works in the browser from outside the browser");
+    }
+    _portalNode = document.createElement("div");
+    _portalNode.style.position = "absolute";
+    _portalNode.style.top = "0px";
+    _portalNode.style.left = "0px";
+    _portalNode.style.right = "0px";
+    _portalNode.style.bottom = "0px";
+    _portalNode.style.width = "100%";
+    _portalNode.style.height = "100%";
+    _portalNode.style.display = "flex";
+    _portalNode.style.flexDirection = "column";
+    const containerNode = document.createElement("div");
+    containerNode.style.position = "fixed";
+    containerNode.style.top = -999999 + "px";
+    containerNode.appendChild(_portalNode);
+    document.body.appendChild(containerNode);
+  }
+  return _portalNode;
+};
 
-// src/random.ts
-function mulberry32(a) {
-  let t = a + 1831565813;
-  t = Math.imul(t ^ t >>> 15, t | 1);
-  t ^= t + Math.imul(t ^ t >>> 7, t | 61);
-  return ((t ^ t >>> 14) >>> 0) / 4294967296;
-}
-function hashCode(str) {
-  let i = 0;
-  let chr = 0;
-  let hash = 0;
-  for (i = 0;i < str.length; i++) {
-    chr = str.charCodeAt(i);
-    hash = (hash << 5) - hash + chr;
-    hash |= 0;
+// src/ResolveCompositionConfig.tsx
+import { createContext as createContext8, createRef, useContext as useContext5, useMemo as useMemo5 } from "react";
+
+// src/input-props-override.ts
+var getKey = () => {
+  return `remotion_inputPropsOverride` + window.location.origin;
+};
+var getInputPropsOverride = () => {
+  if (typeof localStorage === "undefined")
+    return null;
+  const override = localStorage.getItem(getKey());
+  if (!override)
+    return null;
+  return JSON.parse(override);
+};
+var setInputPropsOverride = (override) => {
+  if (typeof localStorage === "undefined")
+    return;
+  if (override === null) {
+    localStorage.removeItem(getKey());
+    return;
   }
-  return hash;
-}
-var random = (seed, dummy) => {
-  if (dummy !== undefined) {
-    throw new TypeError("random() takes only one argument");
+  localStorage.setItem(getKey(), JSON.stringify(override));
+};
+
+// src/config/input-props.ts
+var didWarnSSRImport = false;
+var warnOnceSSRImport = () => {
+  if (didWarnSSRImport) {
+    return;
   }
-  if (seed === null) {
-    return Math.random();
+  didWarnSSRImport = true;
+  console.warn("Called `getInputProps()` on the server. This function is not available server-side and has returned an empty object.");
+  console.warn("To hide this warning, don't call this function on the server:");
+  console.warn("  typeof window === 'undefined' ? {} : getInputProps()");
+};
+var getInputProps = () => {
+  if (typeof window === "undefined") {
+    warnOnceSSRImport();
+    return {};
   }
-  if (typeof seed === "string") {
-    return mulberry32(hashCode(seed));
+  if (getRemotionEnvironment().isPlayer) {
+    throw new Error("You cannot call `getInputProps()` from a <Player>. Instead, the props are available as React props from component that you passed as `component` prop.");
   }
-  if (typeof seed === "number") {
-    return mulberry32(seed * 10000000000);
+  const override = getInputPropsOverride();
+  if (override) {
+    return override;
   }
-  throw new Error("random() argument must be a number or a string");
+  if (typeof window === "undefined" || typeof window.remotion_inputProps === "undefined") {
+    throw new Error("Cannot call `getInputProps()` - window.remotion_inputProps is not set. This API is only available if you are in the Studio, or while you are rendering server-side.");
+  }
+  const param = window.remotion_inputProps;
+  if (!param) {
+    return {};
+  }
+  const parsed = deserializeJSONWithSpecialTypes(param);
+  return parsed;
 };
 
-// src/use-delay-render.tsx
-import { createContext as createContext5, useCallback, useContext as useContext4 } from "react";
+// src/EditorProps.tsx
+import React3, { createContext as createContext7, useCallback as useCallback2, useMemo as useMemo4 } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var EditorPropsContext = createContext7({
+  props: {},
+  updateProps: () => {
+    throw new Error("Not implemented");
+  }
+});
+var timeValueRef = React3.createRef();
+var EditorPropsProvider = ({ children }) => {
+  const [props, setProps] = React3.useState({});
+  const updateProps = useCallback2(({
+    defaultProps,
+    id,
+    newProps
+  }) => {
+    setProps((prev) => {
+      return {
+        ...prev,
+        [id]: typeof newProps === "function" ? newProps(prev[id] ?? defaultProps) : newProps
+      };
+    });
+  }, []);
+  const ctx = useMemo4(() => {
+    return { props, updateProps };
+  }, [props, updateProps]);
+  return /* @__PURE__ */ jsx6(EditorPropsContext.Provider, {
+    value: ctx,
+    children
+  });
+};
 
-// src/cancel-render.ts
-var getErrorStackWithMessage = (error) => {
-  const stack = error.stack ?? "";
-  return stack.startsWith("Error:") ? stack : `${error.message}
-${stack}`;
+// src/use-remotion-environment.ts
+import { useContext as useContext4, useState } from "react";
+
+// src/remotion-environment-context.ts
+import React4 from "react";
+var RemotionEnvironmentContext = React4.createContext(null);
+
+// src/use-remotion-environment.ts
+var useRemotionEnvironment = () => {
+  const context = useContext4(RemotionEnvironmentContext);
+  const [env] = useState(() => getRemotionEnvironment());
+  return context ?? env;
 };
-var isErrorLike = (err) => {
-  if (err instanceof Error) {
-    return true;
+
+// src/validation/validate-dimensions.ts
+function validateDimension(amount, nameOfProp, location) {
+  if (typeof amount !== "number") {
+    throw new Error(`The "${nameOfProp}" prop ${location} must be a number, but you passed a value of type ${typeof amount}`);
   }
-  if (err === null) {
-    return false;
+  if (isNaN(amount)) {
+    throw new TypeError(`The "${nameOfProp}" prop ${location} must not be NaN, but is NaN.`);
   }
-  if (typeof err !== "object") {
-    return false;
+  if (!Number.isFinite(amount)) {
+    throw new TypeError(`The "${nameOfProp}" prop ${location} must be finite, but is ${amount}.`);
   }
-  if (!("stack" in err)) {
-    return false;
+  if (amount % 1 !== 0) {
+    throw new TypeError(`The "${nameOfProp}" prop ${location} must be an integer, but is ${amount}.`);
   }
-  if (typeof err.stack !== "string") {
-    return false;
+  if (amount <= 0) {
+    throw new TypeError(`The "${nameOfProp}" prop ${location} must be positive, but got ${amount}.`);
   }
-  if (!("message" in err)) {
-    return false;
+}
+
+// src/validation/validate-duration-in-frames.ts
+function validateDurationInFrames(durationInFrames, options) {
+  const { allowFloats, component } = options;
+  if (typeof durationInFrames === "undefined") {
+    throw new Error(`The "durationInFrames" prop ${component} is missing.`);
   }
-  if (typeof err.message !== "string") {
-    return false;
+  if (typeof durationInFrames !== "number") {
+    throw new Error(`The "durationInFrames" prop ${component} must be a number, but you passed a value of type ${typeof durationInFrames}`);
   }
-  return true;
-};
-function cancelRenderInternal(scope, err) {
-  let error;
-  if (isErrorLike(err)) {
-    error = err;
-    if (!error.stack) {
-      error.stack = new Error(error.message).stack;
-    }
-  } else if (typeof err === "string") {
-    error = Error(err);
-  } else {
-    error = Error("Rendering was cancelled");
+  if (durationInFrames <= 0) {
+    throw new TypeError(`The "durationInFrames" prop ${component} must be positive, but got ${durationInFrames}.`);
+  }
+  if (!allowFloats && durationInFrames % 1 !== 0) {
+    throw new TypeError(`The "durationInFrames" prop ${component} must be an integer, but got ${durationInFrames}.`);
+  }
+  if (!Number.isFinite(durationInFrames)) {
+    throw new TypeError(`The "durationInFrames" prop ${component} must be finite, but got ${durationInFrames}.`);
+  }
+}
+
+// src/validation/validate-fps.ts
+function validateFps(fps, location, isGif) {
+  if (typeof fps !== "number") {
+    throw new Error(`"fps" must be a number, but you passed a value of type ${typeof fps} ${location}`);
+  }
+  if (!Number.isFinite(fps)) {
+    throw new Error(`"fps" must be a finite, but you passed ${fps} ${location}`);
+  }
+  if (isNaN(fps)) {
+    throw new Error(`"fps" must not be NaN, but got ${fps} ${location}`);
+  }
+  if (fps <= 0) {
+    throw new TypeError(`"fps" must be positive, but got ${fps} ${location}`);
+  }
+  if (isGif && fps > 50) {
+    throw new TypeError(`The FPS for a GIF cannot be higher than 50. Use the --every-nth-frame option to lower the FPS: https://remotion.dev/docs/render-as-gif`);
+  }
+}
+
+// src/ResolveCompositionConfig.tsx
+var ResolveCompositionContext = createContext8(null);
+var resolveCompositionsRef = createRef();
+var needsResolution = (composition) => {
+  return Boolean(composition.calculateMetadata);
+};
+var useResolvedVideoConfig = (preferredCompositionId) => {
+  const context = useContext5(ResolveCompositionContext);
+  const { props: allEditorProps } = useContext5(EditorPropsContext);
+  const { compositions, canvasContent, currentCompositionMetadata } = useContext5(CompositionManager);
+  const currentComposition = canvasContent?.type === "composition" ? canvasContent.compositionId : null;
+  const compositionId = preferredCompositionId ?? currentComposition;
+  const composition = compositions.find((c) => c.id === compositionId);
+  const selectedEditorProps = useMemo5(() => {
+    return composition ? allEditorProps[composition.id] ?? {} : {};
+  }, [allEditorProps, composition]);
+  const env = useRemotionEnvironment();
+  return useMemo5(() => {
+    if (!composition) {
+      return null;
+    }
+    if (currentCompositionMetadata) {
+      return {
+        type: "success",
+        result: {
+          ...currentCompositionMetadata,
+          id: composition.id,
+          defaultProps: composition.defaultProps ?? {}
+        }
+      };
+    }
+    if (!needsResolution(composition)) {
+      validateDurationInFrames(composition.durationInFrames, {
+        allowFloats: false,
+        component: `in <Composition id="${composition.id}">`
+      });
+      validateFps(composition.fps, `in <Composition id="${composition.id}">`, false);
+      validateDimension(composition.width, "width", `in <Composition id="${composition.id}">`);
+      validateDimension(composition.height, "height", `in <Composition id="${composition.id}">`);
+      return {
+        type: "success",
+        result: {
+          width: composition.width,
+          height: composition.height,
+          fps: composition.fps,
+          id: composition.id,
+          durationInFrames: composition.durationInFrames,
+          defaultProps: composition.defaultProps ?? {},
+          props: {
+            ...composition.defaultProps ?? {},
+            ...selectedEditorProps ?? {},
+            ...typeof window === "undefined" || env.isPlayer || !window.remotion_inputProps ? {} : getInputProps() ?? {}
+          },
+          defaultCodec: null,
+          defaultOutName: null,
+          defaultVideoImageFormat: null,
+          defaultPixelFormat: null,
+          defaultProResProfile: null
+        }
+      };
+    }
+    if (!context) {
+      return null;
+    }
+    if (!context[composition.id]) {
+      return null;
+    }
+    return context[composition.id];
+  }, [
+    composition,
+    context,
+    currentCompositionMetadata,
+    selectedEditorProps,
+    env.isPlayer
+  ]);
+};
+
+// src/use-delay-render.tsx
+import { createContext as createContext10, useCallback as useCallback3, useContext as useContext7 } from "react";
+
+// src/cancel-render.ts
+var getErrorStackWithMessage = (error) => {
+  const stack = error.stack ?? "";
+  return stack.startsWith("Error:") ? stack : `${error.message}
+${stack}`;
+};
+var isErrorLike = (err) => {
+  if (err instanceof Error) {
+    return true;
+  }
+  if (err === null) {
+    return false;
+  }
+  if (typeof err !== "object") {
+    return false;
+  }
+  if (!("stack" in err)) {
+    return false;
+  }
+  if (typeof err.stack !== "string") {
+    return false;
+  }
+  if (!("message" in err)) {
+    return false;
+  }
+  if (typeof err.message !== "string") {
+    return false;
+  }
+  return true;
+};
+function cancelRenderInternal(scope, err) {
+  let error;
+  if (isErrorLike(err)) {
+    error = err;
+    if (!error.stack) {
+      error.stack = new Error(error.message).stack;
+    }
+  } else if (typeof err === "string") {
+    error = Error(err);
+  } else {
+    error = Error("Rendering was cancelled");
   }
   if (scope) {
     scope.remotion_cancelledError = getErrorStackWithMessage(error);
@@ -320,27 +752,6 @@ function cancelRender(err) {
   return cancelRenderInternal(typeof window !== "undefined" ? window : undefined, err);
 }
 
-// src/get-remotion-environment.ts
-function getNodeEnvString() {
-  return ["NOD", "E_EN", "V"].join("");
-}
-var getEnvString = () => {
-  return ["e", "nv"].join("");
-};
-var getRemotionEnvironment = () => {
-  const isPlayer = typeof window !== "undefined" && window.remotion_isPlayer;
-  const isRendering = typeof window !== "undefined" && typeof window.process !== "undefined" && typeof window.process.env !== "undefined" && (window.process[getEnvString()][getNodeEnvString()] === "test" || window.process[getEnvString()][getNodeEnvString()] === "production" && typeof window !== "undefined" && typeof window.remotion_puppeteerTimeout !== "undefined");
-  const isStudio = typeof window !== "undefined" && window.remotion_isStudio;
-  const isReadOnlyStudio = typeof window !== "undefined" && window.remotion_isReadOnlyStudio;
-  return {
-    isStudio,
-    isRendering,
-    isPlayer,
-    isReadOnlyStudio,
-    isClientSideRendering: false
-  };
-};
-
 // src/log.ts
 var logLevels = ["trace", "verbose", "info", "warn", "error"];
 var getNumberForLogLevel = (level) => {
@@ -410,11 +821,11 @@ var defaultTimeout = 30000;
 var delayRenderInternal = ({
   scope,
   environment,
-  label,
+  label: label2,
   options
 }) => {
-  if (typeof label !== "string" && label !== null) {
-    throw new Error("The label parameter of delayRender() must be a string or undefined, got: " + JSON.stringify(label));
+  if (typeof label2 !== "string" && label2 !== null) {
+    throw new Error("The label parameter of delayRender() must be a string or undefined, got: " + JSON.stringify(label2));
   }
   const handle = Math.random();
   scope.remotion_delayRenderHandles.push(handle);
@@ -423,12 +834,12 @@ var delayRenderInternal = ({
     const timeoutToUse = (options?.timeoutInMilliseconds ?? scope.remotion_puppeteerTimeout ?? defaultTimeout) - 2000;
     const retriesLeft = (options?.retries ?? 0) - (scope.remotion_attempt - 1);
     scope.remotion_delayRenderTimeouts[handle] = {
-      label: label ?? null,
+      label: label2 ?? null,
       startTime: Date.now(),
       timeout: setTimeout(() => {
         const message = [
           `A delayRender()`,
-          label ? `"${label}"` : null,
+          label2 ? `"${label2}"` : null,
           `was called but not cleared after ${timeoutToUse}ms. See https://remotion.dev/docs/timeout for help.`,
           retriesLeft > 0 ? DELAY_RENDER_RETRIES_LEFT + retriesLeft : null,
           retriesLeft > 0 ? DELAY_RENDER_RETRY_TOKEN : null,
@@ -446,14 +857,14 @@ var delayRenderInternal = ({
   scope.remotion_renderReady = false;
   return handle;
 };
-var delayRender = (label, options) => {
+var delayRender = (label2, options) => {
   if (typeof window === "undefined") {
     return Math.random();
   }
   return delayRenderInternal({
     scope: window,
     environment: getRemotionEnvironment(),
-    label: label ?? null,
+    label: label2 ?? null,
     options: options ?? {}
   });
 };
@@ -475,10 +886,10 @@ var continueRenderInternal = ({
         if (!scope.remotion_delayRenderTimeouts[handle]) {
           return false;
         }
-        const { label, startTime, timeout } = scope.remotion_delayRenderTimeouts[handle];
+        const { label: label2, startTime, timeout } = scope.remotion_delayRenderTimeouts[handle];
         clearTimeout(timeout);
         const message = [
-          label ? `"${label}"` : "A handle",
+          label2 ? `"${label2}"` : "A handle",
           DELAY_RENDER_CLEAR_TOKEN,
           `${Date.now() - startTime}ms`
         ].filter(truthy).join(" ");
@@ -506,59 +917,45 @@ var continueRender = (handle) => {
 };
 
 // src/log-level-context.tsx
-import { createContext as createContext4 } from "react";
-import * as React2 from "react";
-var LogLevelContext = createContext4({
+import { createContext as createContext9 } from "react";
+import * as React5 from "react";
+var LogLevelContext = createContext9({
   logLevel: "info",
   mountTime: 0
 });
 var useLogLevel = () => {
-  const { logLevel } = React2.useContext(LogLevelContext);
+  const { logLevel } = React5.useContext(LogLevelContext);
   if (logLevel === null) {
     throw new Error("useLogLevel must be used within a LogLevelProvider");
   }
   return logLevel;
 };
 var useMountTime = () => {
-  const { mountTime } = React2.useContext(LogLevelContext);
+  const { mountTime } = React5.useContext(LogLevelContext);
   if (mountTime === null) {
     throw new Error("useMountTime must be used within a LogLevelProvider");
   }
   return mountTime;
 };
 
-// src/use-remotion-environment.ts
-import { useContext as useContext3, useState } from "react";
-
-// src/remotion-environment-context.ts
-import React3 from "react";
-var RemotionEnvironmentContext = React3.createContext(null);
-
-// src/use-remotion-environment.ts
-var useRemotionEnvironment = () => {
-  const context = useContext3(RemotionEnvironmentContext);
-  const [env] = useState(() => getRemotionEnvironment());
-  return context ?? env;
-};
-
 // src/use-delay-render.tsx
-var DelayRenderContextType = createContext5(null);
+var DelayRenderContextType = createContext10(null);
 var useDelayRender = () => {
   const environment = useRemotionEnvironment();
-  const scope = useContext4(DelayRenderContextType) ?? (typeof window !== "undefined" ? window : undefined);
+  const scope = useContext7(DelayRenderContextType) ?? (typeof window !== "undefined" ? window : undefined);
   const logLevel = useLogLevel();
-  const delayRender2 = useCallback((label, options) => {
+  const delayRender2 = useCallback3((label2, options) => {
     if (!scope) {
       return Math.random();
     }
     return delayRenderInternal({
       scope,
       environment,
-      label: label ?? null,
+      label: label2 ?? null,
       options: options ?? {}
     });
   }, [environment, scope]);
-  const continueRender2 = useCallback((handle) => {
+  const continueRender2 = useCallback3((handle) => {
     if (!scope) {
       return;
     }
@@ -569,515 +966,484 @@ var useDelayRender = () => {
       logLevel
     });
   }, [environment, logLevel, scope]);
-  const cancelRender2 = useCallback((err) => {
+  const cancelRender2 = useCallback3((err) => {
     return cancelRenderInternal(scope ?? (typeof window !== "undefined" ? window : undefined), err);
   }, [scope]);
   return { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 };
 };
 
-// src/TimelineContext.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
-var SetTimelineContext = createContext6({
-  setFrame: () => {
-    throw new Error("default");
-  },
-  setPlaying: () => {
-    throw new Error("default");
+// src/use-lazy-component.ts
+import React6, { useMemo as useMemo6, useRef as useRef2 } from "react";
+var useLazyComponent = ({
+  compProps,
+  componentName,
+  noSuspense
+}) => {
+  const componentRef = useRef2(null);
+  if ("component" in compProps) {
+    componentRef.current = compProps.component;
   }
-});
-var TimelineContext = createContext6(null);
-var AbsoluteTimeContext = createContext6(null);
-var TimelineContextProvider = ({ children, frameState }) => {
-  const [playing, setPlaying] = useState2(false);
-  const imperativePlaying = useRef(false);
-  const [playbackRate, setPlaybackRate] = useState2(1);
-  const audioAndVideoTags = useRef([]);
-  const [remotionRootId] = useState2(() => String(random(null)));
-  const [_frame, setFrame] = useState2(() => getInitialFrameState());
-  const frame = frameState ?? _frame;
-  const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  if (typeof window !== "undefined") {
-    useLayoutEffect(() => {
-      window.remotion_setFrame = (f, composition, attempt) => {
-        window.remotion_attempt = attempt;
-        const id = delayRender2(`Setting the current frame to ${f}`);
-        let asyncUpdate = true;
-        setFrame((s) => {
-          const currentFrame = s[composition] ?? window.remotion_initialFrame;
-          if (currentFrame === f) {
-            asyncUpdate = false;
-            return s;
-          }
-          return {
-            ...s,
-            [composition]: f
-          };
-        });
-        if (asyncUpdate) {
-          requestAnimationFrame(() => continueRender2(id));
-        } else {
-          continueRender2(id);
-        }
+  const lazy = useMemo6(() => {
+    if ("component" in compProps) {
+      if (typeof document === "undefined" || noSuspense) {
+        return compProps.component;
+      }
+      if (typeof compProps.component === "undefined") {
+        throw new Error(`A value of \`undefined\` was passed to the \`component\` prop. Check the value you are passing to the <${componentName}/> component.`);
+      }
+      const Wrapper = (props) => {
+        const Comp = componentRef.current;
+        return React6.createElement(Comp, props);
       };
-      window.remotion_isPlayer = false;
-    }, [continueRender2, delayRender2]);
-  }
-  const timelineContextValue = useMemo2(() => {
-    return {
-      frame,
-      playing,
-      imperativePlaying,
-      rootId: remotionRootId,
-      playbackRate,
-      setPlaybackRate,
-      audioAndVideoTags
-    };
-  }, [frame, playbackRate, playing, remotionRootId]);
-  const setTimelineContextValue = useMemo2(() => {
-    return {
-      setFrame,
-      setPlaying
-    };
-  }, []);
-  return /* @__PURE__ */ jsx3(AbsoluteTimeContext.Provider, {
-    value: timelineContextValue,
-    children: /* @__PURE__ */ jsx3(TimelineContext.Provider, {
-      value: timelineContextValue,
-      children: /* @__PURE__ */ jsx3(SetTimelineContext.Provider, {
-        value: setTimelineContextValue,
-        children
-      })
-    })
-  });
+      return Wrapper;
+    }
+    if ("lazyComponent" in compProps && typeof compProps.lazyComponent !== "undefined") {
+      if (typeof compProps.lazyComponent === "undefined") {
+        throw new Error(`A value of \`undefined\` was passed to the \`lazyComponent\` prop. Check the value you are passing to the <${componentName}/> component.`);
+      }
+      return React6.lazy(compProps.lazyComponent);
+    }
+    throw new Error("You must pass either 'component' or 'lazyComponent'");
+  }, [compProps.lazyComponent]);
+  return lazy;
 };
 
 // src/use-video.ts
-import { useContext as useContext6, useMemo as useMemo5 } from "react";
-
-// src/CompositionManagerContext.tsx
-import { createContext as createContext7 } from "react";
-var CompositionManager = createContext7({
-  compositions: [],
-  folders: [],
-  currentCompositionMetadata: null,
-  canvasContent: null
-});
-var CompositionSetters = createContext7({
-  registerComposition: () => {
-    return;
-  },
-  unregisterComposition: () => {
-    return;
-  },
-  registerFolder: () => {
-    return;
-  },
-  unregisterFolder: () => {
-    return;
-  },
-  setCanvasContent: () => {
-    return;
-  },
-  onlyRenderComposition: null
-});
-
-// src/ResolveCompositionConfig.tsx
-import { createContext as createContext9, createRef, useContext as useContext5, useMemo as useMemo4 } from "react";
-
-// src/input-props-override.ts
-var getKey = () => {
-  return `remotion_inputPropsOverride` + window.location.origin;
-};
-var getInputPropsOverride = () => {
-  if (typeof localStorage === "undefined")
-    return null;
-  const override = localStorage.getItem(getKey());
-  if (!override)
-    return null;
-  return JSON.parse(override);
-};
-var setInputPropsOverride = (override) => {
-  if (typeof localStorage === "undefined")
-    return;
-  if (override === null) {
-    localStorage.removeItem(getKey());
-    return;
-  }
-  localStorage.setItem(getKey(), JSON.stringify(override));
-};
-
-// src/input-props-serialization.ts
-var DATE_TOKEN = "remotion-date:";
-var FILE_TOKEN = "remotion-file:";
-var serializeJSONWithSpecialTypes = ({
-  data,
-  indent,
-  staticBase
-}) => {
-  let customDateUsed = false;
-  let customFileUsed = false;
-  let mapUsed = false;
-  let setUsed = false;
-  try {
-    const serializedString = JSON.stringify(data, function(key, value) {
-      const item = this[key];
-      if (item instanceof Date) {
-        customDateUsed = true;
-        return `${DATE_TOKEN}${item.toISOString()}`;
-      }
-      if (item instanceof Map) {
-        mapUsed = true;
-        return value;
-      }
-      if (item instanceof Set) {
-        setUsed = true;
-        return value;
-      }
-      if (typeof item === "string" && staticBase !== null && item.startsWith(staticBase)) {
-        customFileUsed = true;
-        return `${FILE_TOKEN}${item.replace(staticBase + "/", "")}`;
-      }
-      return value;
-    }, indent);
-    return { serializedString, customDateUsed, customFileUsed, mapUsed, setUsed };
-  } catch (err) {
-    throw new Error("Could not serialize the passed input props to JSON: " + err.message);
-  }
-};
-var deserializeJSONWithSpecialTypes = (data) => {
-  return JSON.parse(data, (_, value) => {
-    if (typeof value === "string" && value.startsWith(DATE_TOKEN)) {
-      return new Date(value.replace(DATE_TOKEN, ""));
+import { useContext as useContext8, useMemo as useMemo7 } from "react";
+var useVideo = () => {
+  const { canvasContent, compositions, currentCompositionMetadata } = useContext8(CompositionManager);
+  const selected = compositions.find((c) => {
+    return canvasContent?.type === "composition" && c.id === canvasContent.compositionId;
+  });
+  const resolved = useResolvedVideoConfig(selected?.id ?? null);
+  return useMemo7(() => {
+    if (!resolved) {
+      return null;
     }
-    if (typeof value === "string" && value.startsWith(FILE_TOKEN)) {
-      return `${window.remotion_staticBase}/${value.replace(FILE_TOKEN, "")}`;
+    if (resolved.type === "error") {
+      return null;
     }
-    return value;
-  });
-};
-var serializeThenDeserialize = (props) => {
-  return deserializeJSONWithSpecialTypes(serializeJSONWithSpecialTypes({
-    data: props,
-    indent: 2,
-    staticBase: window.remotion_staticBase
-  }).serializedString);
+    if (resolved.type === "loading") {
+      return null;
+    }
+    if (!selected) {
+      return null;
+    }
+    return {
+      ...resolved.result,
+      defaultProps: selected.defaultProps ?? {},
+      id: selected.id,
+      ...currentCompositionMetadata ?? {},
+      component: selected.component
+    };
+  }, [currentCompositionMetadata, resolved, selected]);
 };
-var serializeThenDeserializeInStudio = (props) => {
-  if (getRemotionEnvironment().isStudio) {
-    return serializeThenDeserialize(props);
+
+// src/validation/validate-composition-id.ts
+var getRegex2 = () => /^([a-zA-Z0-9-\u4E00-\u9FFF])+$/g;
+var isCompositionIdValid = (id) => id.match(getRegex2());
+var validateCompositionId = (id) => {
+  if (!isCompositionIdValid(id)) {
+    throw new Error(`Composition id can only contain a-z, A-Z, 0-9, CJK characters and -. You passed ${id}`);
   }
-  return props;
 };
+var invalidCompositionErrorMessage = `Composition ID must match ${String(getRegex2())}`;
 
-// src/config/input-props.ts
-var didWarnSSRImport = false;
-var warnOnceSSRImport = () => {
-  if (didWarnSSRImport) {
+// src/validation/validate-default-props.ts
+var validateDefaultAndInputProps = (defaultProps, name, compositionId) => {
+  if (!defaultProps) {
     return;
   }
-  didWarnSSRImport = true;
-  console.warn("Called `getInputProps()` on the server. This function is not available server-side and has returned an empty object.");
-  console.warn("To hide this warning, don't call this function on the server:");
-  console.warn("  typeof window === 'undefined' ? {} : getInputProps()");
-};
-var getInputProps = () => {
-  if (typeof window === "undefined") {
-    warnOnceSSRImport();
-    return {};
-  }
-  if (getRemotionEnvironment().isPlayer) {
-    throw new Error("You cannot call `getInputProps()` from a <Player>. Instead, the props are available as React props from component that you passed as `component` prop.");
-  }
-  const override = getInputPropsOverride();
-  if (override) {
-    return override;
-  }
-  if (typeof window === "undefined" || typeof window.remotion_inputProps === "undefined") {
-    throw new Error("Cannot call `getInputProps()` - window.remotion_inputProps is not set. This API is only available if you are in the Studio, or while you are rendering server-side.");
+  if (typeof defaultProps !== "object") {
+    throw new Error(`"${name}" must be an object, but you passed a value of type ${typeof defaultProps}`);
   }
-  const param = window.remotion_inputProps;
-  if (!param) {
-    return {};
+  if (Array.isArray(defaultProps)) {
+    throw new Error(`"${name}" must be an object, an array was passed ${compositionId ? `for composition "${compositionId}"` : ""}`);
   }
-  const parsed = deserializeJSONWithSpecialTypes(param);
-  return parsed;
 };
 
-// src/EditorProps.tsx
-import React5, { createContext as createContext8, useCallback as useCallback2, useMemo as useMemo3 } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var EditorPropsContext = createContext8({
-  props: {},
-  updateProps: () => {
-    throw new Error("Not implemented");
-  }
-});
-var timeValueRef = React5.createRef();
-var EditorPropsProvider = ({ children }) => {
-  const [props, setProps] = React5.useState({});
-  const updateProps = useCallback2(({
-    defaultProps,
-    id,
-    newProps
-  }) => {
-    setProps((prev) => {
-      return {
-        ...prev,
-        [id]: typeof newProps === "function" ? newProps(prev[id] ?? defaultProps) : newProps
-      };
-    });
-  }, []);
-  const ctx = useMemo3(() => {
-    return { props, updateProps };
-  }, [props, updateProps]);
-  return /* @__PURE__ */ jsx4(EditorPropsContext.Provider, {
-    value: ctx,
-    children
-  });
+// src/Composition.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var Fallback = () => {
+  const { continueRender: continueRender2, delayRender: delayRender2 } = useDelayRender();
+  useEffect2(() => {
+    const fallback = delayRender2("Waiting for Root component to unsuspend");
+    return () => continueRender2(fallback);
+  }, [continueRender2, delayRender2]);
+  return null;
 };
-
-// src/validation/validate-dimensions.ts
-function validateDimension(amount, nameOfProp, location) {
-  if (typeof amount !== "number") {
-    throw new Error(`The "${nameOfProp}" prop ${location} must be a number, but you passed a value of type ${typeof amount}`);
-  }
-  if (isNaN(amount)) {
-    throw new TypeError(`The "${nameOfProp}" prop ${location} must not be NaN, but is NaN.`);
+var InnerComposition = ({
+  width,
+  height,
+  fps,
+  durationInFrames,
+  id,
+  defaultProps,
+  schema,
+  ...compProps
+}) => {
+  const compManager = useContext9(CompositionSetters);
+  const { registerComposition, unregisterComposition } = compManager;
+  const video = useVideo();
+  const lazy = useLazyComponent({
+    compProps,
+    componentName: "Composition",
+    noSuspense: false
+  });
+  const nonce = useNonce();
+  const isPlayer = useIsPlayer();
+  const environment = useRemotionEnvironment();
+  const canUseComposition = useContext9(CanUseRemotionHooks);
+  if (typeof window !== "undefined") {
+    window.remotion_seenCompositionIds = Array.from(new Set([...window.remotion_seenCompositionIds ?? [], id]));
   }
-  if (!Number.isFinite(amount)) {
-    throw new TypeError(`The "${nameOfProp}" prop ${location} must be finite, but is ${amount}.`);
+  if (canUseComposition) {
+    if (isPlayer) {
+      throw new Error("<Composition> was mounted inside the `component` that was passed to the <Player>. See https://remotion.dev/docs/wrong-composition-mount for help.");
+    }
+    throw new Error("<Composition> mounted inside another composition. See https://remotion.dev/docs/wrong-composition-mount for help.");
   }
-  if (amount % 1 !== 0) {
-    throw new TypeError(`The "${nameOfProp}" prop ${location} must be an integer, but is ${amount}.`);
-  }
-  if (amount <= 0) {
-    throw new TypeError(`The "${nameOfProp}" prop ${location} must be positive, but got ${amount}.`);
-  }
-}
-
-// src/validation/validate-duration-in-frames.ts
-function validateDurationInFrames(durationInFrames, options) {
-  const { allowFloats, component } = options;
-  if (typeof durationInFrames === "undefined") {
-    throw new Error(`The "durationInFrames" prop ${component} is missing.`);
-  }
-  if (typeof durationInFrames !== "number") {
-    throw new Error(`The "durationInFrames" prop ${component} must be a number, but you passed a value of type ${typeof durationInFrames}`);
-  }
-  if (durationInFrames <= 0) {
-    throw new TypeError(`The "durationInFrames" prop ${component} must be positive, but got ${durationInFrames}.`);
-  }
-  if (!allowFloats && durationInFrames % 1 !== 0) {
-    throw new TypeError(`The "durationInFrames" prop ${component} must be an integer, but got ${durationInFrames}.`);
-  }
-  if (!Number.isFinite(durationInFrames)) {
-    throw new TypeError(`The "durationInFrames" prop ${component} must be finite, but got ${durationInFrames}.`);
-  }
-}
-
-// src/validation/validate-fps.ts
-function validateFps(fps, location, isGif) {
-  if (typeof fps !== "number") {
-    throw new Error(`"fps" must be a number, but you passed a value of type ${typeof fps} ${location}`);
-  }
-  if (!Number.isFinite(fps)) {
-    throw new Error(`"fps" must be a finite, but you passed ${fps} ${location}`);
-  }
-  if (isNaN(fps)) {
-    throw new Error(`"fps" must not be NaN, but got ${fps} ${location}`);
-  }
-  if (fps <= 0) {
-    throw new TypeError(`"fps" must be positive, but got ${fps} ${location}`);
-  }
-  if (isGif && fps > 50) {
-    throw new TypeError(`The FPS for a GIF cannot be higher than 50. Use the --every-nth-frame option to lower the FPS: https://remotion.dev/docs/render-as-gif`);
-  }
-}
-
-// src/ResolveCompositionConfig.tsx
-var ResolveCompositionContext = createContext9(null);
-var resolveCompositionsRef = createRef();
-var needsResolution = (composition) => {
-  return Boolean(composition.calculateMetadata);
-};
-var useResolvedVideoConfig = (preferredCompositionId) => {
-  const context = useContext5(ResolveCompositionContext);
-  const { props: allEditorProps } = useContext5(EditorPropsContext);
-  const { compositions, canvasContent, currentCompositionMetadata } = useContext5(CompositionManager);
-  const currentComposition = canvasContent?.type === "composition" ? canvasContent.compositionId : null;
-  const compositionId = preferredCompositionId ?? currentComposition;
-  const composition = compositions.find((c) => c.id === compositionId);
-  const selectedEditorProps = useMemo4(() => {
-    return composition ? allEditorProps[composition.id] ?? {} : {};
-  }, [allEditorProps, composition]);
-  const env = useRemotionEnvironment();
-  return useMemo4(() => {
-    if (!composition) {
-      return null;
-    }
-    if (currentCompositionMetadata) {
-      return {
-        type: "success",
-        result: {
-          ...currentCompositionMetadata,
-          id: composition.id,
-          defaultProps: composition.defaultProps ?? {}
-        }
-      };
-    }
-    if (!needsResolution(composition)) {
-      validateDurationInFrames(composition.durationInFrames, {
-        allowFloats: false,
-        component: `in <Composition id="${composition.id}">`
-      });
-      validateFps(composition.fps, `in <Composition id="${composition.id}">`, false);
-      validateDimension(composition.width, "width", `in <Composition id="${composition.id}">`);
-      validateDimension(composition.height, "height", `in <Composition id="${composition.id}">`);
-      return {
-        type: "success",
-        result: {
-          width: composition.width,
-          height: composition.height,
-          fps: composition.fps,
-          id: composition.id,
-          durationInFrames: composition.durationInFrames,
-          defaultProps: composition.defaultProps ?? {},
-          props: {
-            ...composition.defaultProps ?? {},
-            ...selectedEditorProps ?? {},
-            ...typeof window === "undefined" || env.isPlayer || !window.remotion_inputProps ? {} : getInputProps() ?? {}
-          },
-          defaultCodec: null,
-          defaultOutName: null,
-          defaultVideoImageFormat: null,
-          defaultPixelFormat: null,
-          defaultProResProfile: null
-        }
-      };
-    }
-    if (!context) {
-      return null;
-    }
-    if (!context[composition.id]) {
-      return null;
+  const { folderName, parentName } = useContext9(FolderContext);
+  const stack = compProps.stack ?? null;
+  useEffect2(() => {
+    if (!id) {
+      throw new Error("No id for composition passed.");
     }
-    return context[composition.id];
+    validateCompositionId(id);
+    validateDefaultAndInputProps(defaultProps, "defaultProps", id);
+    registerComposition({
+      durationInFrames: durationInFrames ?? undefined,
+      fps: fps ?? undefined,
+      height: height ?? undefined,
+      width: width ?? undefined,
+      id,
+      folderName,
+      component: lazy,
+      defaultProps: serializeThenDeserializeInStudio(defaultProps ?? {}),
+      nonce: nonce.get(),
+      parentFolderName: parentName,
+      schema: schema ?? null,
+      calculateMetadata: compProps.calculateMetadata ?? null,
+      stack
+    });
+    return () => {
+      unregisterComposition(id);
+    };
   }, [
-    composition,
-    context,
-    currentCompositionMetadata,
-    selectedEditorProps,
-    env.isPlayer
+    durationInFrames,
+    fps,
+    height,
+    lazy,
+    id,
+    folderName,
+    defaultProps,
+    width,
+    nonce,
+    parentName,
+    schema,
+    compProps.calculateMetadata,
+    stack,
+    registerComposition,
+    unregisterComposition
   ]);
-};
-
-// src/use-video.ts
-var useVideo = () => {
-  const { canvasContent, compositions, currentCompositionMetadata } = useContext6(CompositionManager);
-  const selected = compositions.find((c) => {
-    return canvasContent?.type === "composition" && c.id === canvasContent.compositionId;
-  });
-  const resolved = useResolvedVideoConfig(selected?.id ?? null);
-  return useMemo5(() => {
-    if (!resolved) {
-      return null;
-    }
-    if (resolved.type === "error") {
-      return null;
-    }
-    if (resolved.type === "loading") {
+  const resolved = useResolvedVideoConfig(id);
+  if (environment.isStudio && video && video.component === lazy && video.id === id) {
+    const Comp = lazy;
+    if (resolved === null || resolved.type !== "success" && resolved.type !== "success-and-refreshing") {
       return null;
     }
-    if (!selected) {
+    return createPortal(/* @__PURE__ */ jsx7(CanUseRemotionHooksProvider, {
+      children: /* @__PURE__ */ jsx7(Suspense, {
+        fallback: /* @__PURE__ */ jsx7(Loading, {}),
+        children: /* @__PURE__ */ jsx7(Comp, {
+          ...resolved.result.props ?? {}
+        })
+      })
+    }), portalNode());
+  }
+  if (environment.isRendering && video && video.component === lazy && video.id === id) {
+    const Comp = lazy;
+    if (resolved === null || resolved.type !== "success" && resolved.type !== "success-and-refreshing") {
       return null;
     }
-    return {
-      ...resolved.result,
-      defaultProps: selected.defaultProps ?? {},
-      id: selected.id,
-      ...currentCompositionMetadata ?? {},
-      component: selected.component
-    };
-  }, [currentCompositionMetadata, resolved, selected]);
-};
-
-// src/timeline-position-state.ts
-var makeKey = () => {
-  return `remotion.time-all`;
-};
-var persistCurrentFrame = (time) => {
-  localStorage.setItem(makeKey(), JSON.stringify(time));
-};
-var getInitialFrameState = () => {
-  const item = localStorage.getItem(makeKey()) ?? "{}";
-  const obj = JSON.parse(item);
-  return obj;
-};
-var getFrameForComposition = (composition) => {
-  const item = localStorage.getItem(makeKey()) ?? "{}";
-  const obj = JSON.parse(item);
-  if (obj[composition] !== undefined) {
-    return Number(obj[composition]);
-  }
-  if (typeof window === "undefined") {
-    return 0;
-  }
-  return window.remotion_initialFrame ?? 0;
-};
-var useTimelinePositionFromContext = (state) => {
-  const videoConfig = useVideo();
-  const env = useRemotionEnvironment();
-  if (!videoConfig) {
-    return typeof window === "undefined" ? 0 : window.remotion_initialFrame ?? 0;
-  }
-  const unclamped = state.frame[videoConfig.id] ?? (env.isPlayer ? 0 : getFrameForComposition(videoConfig.id));
-  return Math.min(videoConfig.durationInFrames - 1, unclamped);
-};
-var useTimelineContext = () => {
-  const state = useContext7(TimelineContext);
-  if (state === null) {
-    throw new Error("TimelineContext is not available. This hook must be used inside a <Player> or the Remotion Studio.");
+    return createPortal(/* @__PURE__ */ jsx7(CanUseRemotionHooksProvider, {
+      children: /* @__PURE__ */ jsx7(Suspense, {
+        fallback: /* @__PURE__ */ jsx7(Fallback, {}),
+        children: /* @__PURE__ */ jsx7(Comp, {
+          ...resolved.result.props ?? {}
+        })
+      })
+    }), portalNode());
   }
-  return state;
-};
-var useTimelinePosition = () => {
-  const state = useTimelineContext();
-  return useTimelinePositionFromContext(state);
+  return null;
 };
-var useAbsoluteTimelinePosition = () => {
-  const state = useContext7(AbsoluteTimeContext);
-  if (state === null) {
-    throw new Error("AbsoluteTimeContext is not available. This hook must be used inside a <Player> or the Remotion Studio.");
+var Composition = (props) => {
+  const { onlyRenderComposition } = useContext9(CompositionSetters);
+  if (onlyRenderComposition && onlyRenderComposition !== props.id) {
+    return null;
   }
-  return useTimelinePositionFromContext(state);
-};
-var useTimelineSetFrame = () => {
-  const { setFrame } = useContext7(SetTimelineContext);
-  return setFrame;
+  return /* @__PURE__ */ jsx7(InnerComposition, {
+    ...props
+  });
 };
-var usePlayingState = () => {
-  const { playing, imperativePlaying } = useTimelineContext();
-  const { setPlaying } = useContext7(SetTimelineContext);
-  return useMemo6(() => [playing, setPlaying, imperativePlaying], [imperativePlaying, playing, setPlaying]);
+
+// src/enable-sequence-stack-traces.ts
+var componentsToAddStacksTo = [];
+var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
+var addSequenceStackTraces = (component) => {
+  componentsToAddStacksTo.push(component);
 };
 
-// src/use-current-frame.ts
-import { useContext as useContext8 } from "react";
+// src/version.ts
+var VERSION = "4.0.443";
 
-// src/CanUseRemotionHooks.tsx
-import { createContext as createContext10 } from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var CanUseRemotionHooks = createContext10(false);
-var CanUseRemotionHooksProvider = ({ children }) => {
-  return /* @__PURE__ */ jsx5(CanUseRemotionHooks.Provider, {
-    value: true,
-    children
+// src/multiple-versions-warning.ts
+var checkMultipleRemotionVersions = () => {
+  if (typeof globalThis === "undefined") {
+    return;
+  }
+  const set = () => {
+    globalThis.remotion_imported = VERSION;
+    if (typeof window !== "undefined") {
+      window.remotion_imported = VERSION;
+    }
+  };
+  const alreadyImported = globalThis.remotion_imported || typeof window !== "undefined" && window.remotion_imported;
+  if (alreadyImported) {
+    if (alreadyImported === VERSION) {
+      return;
+    }
+    if (typeof alreadyImported === "string" && alreadyImported.includes("webcodecs")) {
+      set();
+      return;
+    }
+    throw new TypeError(`\uD83D\uDEA8 Multiple versions of Remotion detected: ${[
+      VERSION,
+      typeof alreadyImported === "string" ? alreadyImported : "an older version"
+    ].filter(truthy).join(" and ")}. This will cause things to break in an unexpected way.
+Check that all your Remotion packages are on the same version. If your dependencies depend on Remotion, make them peer dependencies. You can also run \`npx remotion versions\` from your terminal to see which versions are mismatching.`);
+  }
+  set();
+};
+
+// src/Null.tsx
+var Null = () => {
+  throw new Error("<Null> has been removed as of Remotion v4.0.228. The native clipping APIs were experimental and subject to removal at any time. We removed them because they were sparingly used and made rendering often slower rather than faster.");
+};
+
+// src/Sequence.tsx
+import {
+  forwardRef as forwardRef2,
+  useContext as useContext15,
+  useEffect as useEffect3,
+  useMemo as useMemo13,
+  useState as useState4
+} from "react";
+
+// src/freeze.tsx
+import { useContext as useContext14, useMemo as useMemo11 } from "react";
+
+// src/SequenceContext.tsx
+import { createContext as createContext11 } from "react";
+var SequenceContext = createContext11(null);
+
+// src/timeline-position-state.ts
+var exports_timeline_position_state = {};
+__export(exports_timeline_position_state, {
+  useTimelineSetFrame: () => useTimelineSetFrame,
+  useTimelinePosition: () => useTimelinePosition,
+  useTimelineContext: () => useTimelineContext,
+  usePlayingState: () => usePlayingState,
+  useAbsoluteTimelinePosition: () => useAbsoluteTimelinePosition,
+  persistCurrentFrame: () => persistCurrentFrame,
+  getInitialFrameState: () => getInitialFrameState,
+  getFrameForComposition: () => getFrameForComposition
+});
+import { useContext as useContext10, useMemo as useMemo9 } from "react";
+
+// src/TimelineContext.tsx
+import {
+  createContext as createContext12,
+  useLayoutEffect,
+  useMemo as useMemo8,
+  useRef as useRef3,
+  useState as useState2
+} from "react";
+
+// src/random.ts
+function mulberry32(a) {
+  let t = a + 1831565813;
+  t = Math.imul(t ^ t >>> 15, t | 1);
+  t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+  return ((t ^ t >>> 14) >>> 0) / 4294967296;
+}
+function hashCode(str) {
+  let i = 0;
+  let chr = 0;
+  let hash = 0;
+  for (i = 0;i < str.length; i++) {
+    chr = str.charCodeAt(i);
+    hash = (hash << 5) - hash + chr;
+    hash |= 0;
+  }
+  return hash;
+}
+var random = (seed, dummy) => {
+  if (dummy !== undefined) {
+    throw new TypeError("random() takes only one argument");
+  }
+  if (seed === null) {
+    return Math.random();
+  }
+  if (typeof seed === "string") {
+    return mulberry32(hashCode(seed));
+  }
+  if (typeof seed === "number") {
+    return mulberry32(seed * 10000000000);
+  }
+  throw new Error("random() argument must be a number or a string");
+};
+
+// src/TimelineContext.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var SetTimelineContext = createContext12({
+  setFrame: () => {
+    throw new Error("default");
+  },
+  setPlaying: () => {
+    throw new Error("default");
+  }
+});
+var TimelineContext = createContext12(null);
+var AbsoluteTimeContext = createContext12(null);
+var TimelineContextProvider = ({ children, frameState }) => {
+  const [playing, setPlaying] = useState2(false);
+  const imperativePlaying = useRef3(false);
+  const [playbackRate, setPlaybackRate] = useState2(1);
+  const audioAndVideoTags = useRef3([]);
+  const [remotionRootId] = useState2(() => String(random(null)));
+  const [_frame, setFrame] = useState2(() => getInitialFrameState());
+  const frame = frameState ?? _frame;
+  const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
+  if (typeof window !== "undefined") {
+    useLayoutEffect(() => {
+      window.remotion_setFrame = (f, composition, attempt) => {
+        window.remotion_attempt = attempt;
+        const id = delayRender2(`Setting the current frame to ${f}`);
+        let asyncUpdate = true;
+        setFrame((s) => {
+          const currentFrame = s[composition] ?? window.remotion_initialFrame;
+          if (currentFrame === f) {
+            asyncUpdate = false;
+            return s;
+          }
+          return {
+            ...s,
+            [composition]: f
+          };
+        });
+        if (asyncUpdate) {
+          requestAnimationFrame(() => continueRender2(id));
+        } else {
+          continueRender2(id);
+        }
+      };
+      window.remotion_isPlayer = false;
+    }, [continueRender2, delayRender2]);
+  }
+  const timelineContextValue = useMemo8(() => {
+    return {
+      frame,
+      playing,
+      imperativePlaying,
+      rootId: remotionRootId,
+      playbackRate,
+      setPlaybackRate,
+      audioAndVideoTags
+    };
+  }, [frame, playbackRate, playing, remotionRootId]);
+  const setTimelineContextValue = useMemo8(() => {
+    return {
+      setFrame,
+      setPlaying
+    };
+  }, []);
+  return /* @__PURE__ */ jsx8(AbsoluteTimeContext.Provider, {
+    value: timelineContextValue,
+    children: /* @__PURE__ */ jsx8(TimelineContext.Provider, {
+      value: timelineContextValue,
+      children: /* @__PURE__ */ jsx8(SetTimelineContext.Provider, {
+        value: setTimelineContextValue,
+        children
+      })
+    })
   });
 };
 
+// src/timeline-position-state.ts
+var makeKey = () => {
+  return `remotion.time-all`;
+};
+var persistCurrentFrame = (time) => {
+  localStorage.setItem(makeKey(), JSON.stringify(time));
+};
+var getInitialFrameState = () => {
+  const item = localStorage.getItem(makeKey()) ?? "{}";
+  const obj = JSON.parse(item);
+  return obj;
+};
+var getFrameForComposition = (composition) => {
+  const item = localStorage.getItem(makeKey()) ?? "{}";
+  const obj = JSON.parse(item);
+  if (obj[composition] !== undefined) {
+    return Number(obj[composition]);
+  }
+  if (typeof window === "undefined") {
+    return 0;
+  }
+  return window.remotion_initialFrame ?? 0;
+};
+var useTimelinePositionFromContext = (state) => {
+  const videoConfig = useVideo();
+  const env = useRemotionEnvironment();
+  if (!videoConfig) {
+    return typeof window === "undefined" ? 0 : window.remotion_initialFrame ?? 0;
+  }
+  const unclamped = state.frame[videoConfig.id] ?? (env.isPlayer ? 0 : getFrameForComposition(videoConfig.id));
+  return Math.min(videoConfig.durationInFrames - 1, unclamped);
+};
+var useTimelineContext = () => {
+  const state = useContext10(TimelineContext);
+  if (state === null) {
+    throw new Error("TimelineContext is not available. This hook must be used inside a <Player> or the Remotion Studio.");
+  }
+  return state;
+};
+var useTimelinePosition = () => {
+  const state = useTimelineContext();
+  return useTimelinePositionFromContext(state);
+};
+var useAbsoluteTimelinePosition = () => {
+  const state = useContext10(AbsoluteTimeContext);
+  if (state === null) {
+    throw new Error("AbsoluteTimeContext is not available. This hook must be used inside a <Player> or the Remotion Studio.");
+  }
+  return useTimelinePositionFromContext(state);
+};
+var useTimelineSetFrame = () => {
+  const { setFrame } = useContext10(SetTimelineContext);
+  return setFrame;
+};
+var usePlayingState = () => {
+  const { playing, imperativePlaying } = useTimelineContext();
+  const { setPlaying } = useContext10(SetTimelineContext);
+  return useMemo9(() => [playing, setPlaying, imperativePlaying], [imperativePlaying, playing, setPlaying]);
+};
+
 // src/use-current-frame.ts
+import { useContext as useContext11 } from "react";
 var useCurrentFrame = () => {
-  const canUseRemotionHooks = useContext8(CanUseRemotionHooks);
+  const canUseRemotionHooks = useContext11(CanUseRemotionHooks);
   const env = useRemotionEnvironment();
   if (!canUseRemotionHooks) {
     if (env.isPlayer) {
@@ -1086,23 +1452,23 @@ var useCurrentFrame = () => {
     throw new Error(`useCurrentFrame() can only be called inside a component that was registered as a composition. See https://www.remotion.dev/docs/the-fundamentals#defining-compositions`);
   }
   const frame = useTimelinePosition();
-  const context = useContext8(SequenceContext);
+  const context = useContext11(SequenceContext);
   const contextOffset = context ? context.cumulatedFrom + context.relativeFrom : 0;
   return frame - contextOffset;
 };
 
 // src/use-video-config.ts
-import { useContext as useContext10 } from "react";
+import { useContext as useContext13 } from "react";
 
 // src/use-unsafe-video-config.ts
-import { useContext as useContext9, useMemo as useMemo7 } from "react";
+import { useContext as useContext12, useMemo as useMemo10 } from "react";
 var useUnsafeVideoConfig = () => {
-  const context = useContext9(SequenceContext);
+  const context = useContext12(SequenceContext);
   const ctxWidth = context?.width ?? null;
   const ctxHeight = context?.height ?? null;
   const ctxDuration = context?.durationInFrames ?? null;
   const video = useVideo();
-  return useMemo7(() => {
+  return useMemo10(() => {
     if (!video) {
       return null;
     }
@@ -1140,7 +1506,7 @@ var useUnsafeVideoConfig = () => {
 // src/use-video-config.ts
 var useVideoConfig = () => {
   const videoConfig = useUnsafeVideoConfig();
-  const context = useContext10(CanUseRemotionHooks);
+  const context = useContext13(CanUseRemotionHooks);
   const isPlayer = useIsPlayer();
   if (!videoConfig) {
     if (typeof window !== "undefined" && window.remotion_isPlayer || isPlayer) {
@@ -1159,7 +1525,7 @@ var useVideoConfig = () => {
 };
 
 // src/freeze.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var Freeze = ({
   frame: frameToFreeze,
   children,
@@ -1179,7 +1545,7 @@ var Freeze = ({
   if (!Number.isFinite(frameToFreeze)) {
     throw new Error(`The 'frame' prop of <Freeze /> must be a finite number, but it is ${frameToFreeze}.`);
   }
-  const isActive = useMemo8(() => {
+  const isActive = useMemo11(() => {
     if (typeof active === "boolean") {
       return active;
     }
@@ -1188,9 +1554,9 @@ var Freeze = ({
     }
   }, [active, frame]);
   const timelineContext = useTimelineContext();
-  const sequenceContext = useContext11(SequenceContext);
+  const sequenceContext = useContext14(SequenceContext);
   const relativeFrom = sequenceContext?.relativeFrom ?? 0;
-  const timelineValue = useMemo8(() => {
+  const timelineValue = useMemo11(() => {
     if (!isActive) {
       return timelineContext;
     }
@@ -1205,7 +1571,7 @@ var Freeze = ({
       }
     };
   }, [isActive, timelineContext, videoConfig.id, frameToFreeze, relativeFrom]);
-  const newSequenceContext = useMemo8(() => {
+  const newSequenceContext = useMemo11(() => {
     if (!sequenceContext) {
       return null;
     }
@@ -1217,63 +1583,26 @@ var Freeze = ({
       cumulatedFrom: 0
     };
   }, [sequenceContext, isActive]);
-  return /* @__PURE__ */ jsx6(TimelineContext.Provider, {
+  return /* @__PURE__ */ jsx9(TimelineContext.Provider, {
     value: timelineValue,
-    children: /* @__PURE__ */ jsx6(SequenceContext.Provider, {
+    children: /* @__PURE__ */ jsx9(SequenceContext.Provider, {
       value: newSequenceContext,
       children
     })
   });
 };
 
-// src/nonce.ts
-import { createContext as createContext11, useCallback as useCallback3, useContext as useContext12, useMemo as useMemo9, useRef as useRef2 } from "react";
-var NonceContext = createContext11({
-  getNonce: () => 0
-});
-var fastRefreshNonce = 0;
-try {
-  if (typeof __webpack_module__ !== "undefined") {
-    if (__webpack_module__.hot) {
-      __webpack_module__.hot.addStatusHandler((status) => {
-        if (status === "idle") {
-          fastRefreshNonce++;
-        }
-      });
-    }
-  }
-} catch {}
-var useNonce = () => {
-  const context = useContext12(NonceContext);
-  const nonce = context.getNonce();
-  const nonceRef = useRef2(nonce);
-  nonceRef.current = nonce;
-  const history = useRef2([[fastRefreshNonce, nonce]]);
-  const get = useCallback3(() => {
-    if (fastRefreshNonce !== history.current[history.current.length - 1][0]) {
-      history.current = [
-        ...history.current,
-        [fastRefreshNonce, nonceRef.current]
-      ];
-    }
-    return history.current;
-  }, [history]);
-  return useMemo9(() => {
-    return { get };
-  }, [get]);
-};
-
 // src/PremountContext.tsx
-import { createContext as createContext12 } from "react";
-var PremountContext = createContext12({
+import { createContext as createContext13 } from "react";
+var PremountContext = createContext13({
   premountFramesRemaining: 0,
   playing: false
 });
 
 // src/SequenceManager.tsx
-import React8, { useCallback as useCallback4, useMemo as useMemo10, useRef as useRef3, useState as useState3 } from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var SequenceManager = React8.createContext({
+import React10, { useCallback as useCallback4, useMemo as useMemo12, useRef as useRef4, useState as useState3 } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var SequenceManager = React10.createContext({
   registerSequence: () => {
     throw new Error("SequenceManagerContext not initialized");
   },
@@ -1282,13 +1611,13 @@ var SequenceManager = React8.createContext({
   },
   sequences: []
 });
-var SequenceVisibilityToggleContext = React8.createContext({
+var SequenceVisibilityToggleContext = React10.createContext({
   hidden: {},
   setHidden: () => {
     throw new Error("SequenceVisibilityToggle not initialized");
   }
 });
-var VisualModeOverridesContext = React8.createContext({
+var VisualModeOverridesContext = React10.createContext({
   dragOverrides: {},
   setDragOverrides: () => {
     throw new Error("VisualModeOverridesContext not initialized");
@@ -1306,7 +1635,7 @@ var SequenceManagerProvider = ({ children, visualModeEnabled }) => {
   const [sequences, setSequences] = useState3([]);
   const [hidden, setHidden] = useState3({});
   const [dragOverrides, setControlOverrides] = useState3({});
-  const controlOverridesRef = useRef3(dragOverrides);
+  const controlOverridesRef = useRef4(dragOverrides);
   controlOverridesRef.current = dragOverrides;
   const [codeValues, setCodeValuesMapState] = useState3({});
   const setDragOverrides = useCallback4((sequenceId, key, value) => {
@@ -1352,20 +1681,20 @@ var SequenceManagerProvider = ({ children, visualModeEnabled }) => {
   const unregisterSequence = useCallback4((seq) => {
     setSequences((seqs) => seqs.filter((s) => s.id !== seq));
   }, []);
-  const sequenceContext = useMemo10(() => {
+  const sequenceContext = useMemo12(() => {
     return {
       registerSequence,
       sequences,
       unregisterSequence
     };
   }, [registerSequence, sequences, unregisterSequence]);
-  const hiddenContext = useMemo10(() => {
+  const hiddenContext = useMemo12(() => {
     return {
       hidden,
       setHidden
     };
   }, [hidden]);
-  const overrideContext = useMemo10(() => {
+  const overrideContext = useMemo12(() => {
     return {
       visualModeEnabled,
       dragOverrides,
@@ -1382,11 +1711,11 @@ var SequenceManagerProvider = ({ children, visualModeEnabled }) => {
     codeValues,
     setCodeValues
   ]);
-  return /* @__PURE__ */ jsx7(SequenceManager.Provider, {
+  return /* @__PURE__ */ jsx10(SequenceManager.Provider, {
     value: sequenceContext,
-    children: /* @__PURE__ */ jsx7(SequenceVisibilityToggleContext.Provider, {
+    children: /* @__PURE__ */ jsx10(SequenceVisibilityToggleContext.Provider, {
       value: hiddenContext,
-      children: /* @__PURE__ */ jsx7(VisualModeOverridesContext.Provider, {
+      children: /* @__PURE__ */ jsx10(VisualModeOverridesContext.Provider, {
         value: overrideContext,
         children
       })
@@ -1398,7 +1727,7 @@ var SequenceManagerProvider = ({ children, visualModeEnabled }) => {
 var ENABLE_V5_BREAKING_CHANGES = false;
 
 // src/Sequence.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var RegularSequenceRefForwardingFunction = ({
   from = 0,
   durationInFrames = Infinity,
@@ -1416,7 +1745,7 @@ var RegularSequenceRefForwardingFunction = ({
 }, ref) => {
   const { layout = "absolute-fill" } = other;
   const [id] = useState4(() => String(Math.random()));
-  const parentSequence = useContext13(SequenceContext);
+  const parentSequence = useContext15(SequenceContext);
   const { rootId } = useTimelineContext();
   const cumulatedFrom = parentSequence ? parentSequence.cumulatedFrom + parentSequence.relativeFrom : 0;
   const nonce = useNonce();
@@ -1442,15 +1771,15 @@ var RegularSequenceRefForwardingFunction = ({
   const videoConfig = useVideoConfig();
   const parentSequenceDuration = parentSequence ? Math.min(parentSequence.durationInFrames - from, durationInFrames) : durationInFrames;
   const actualDurationInFrames = Math.max(0, Math.min(videoConfig.durationInFrames - from, parentSequenceDuration));
-  const { registerSequence, unregisterSequence } = useContext13(SequenceManager);
-  const { hidden } = useContext13(SequenceVisibilityToggleContext);
-  const premounting = useMemo11(() => {
+  const { registerSequence, unregisterSequence } = useContext15(SequenceManager);
+  const { hidden } = useContext15(SequenceVisibilityToggleContext);
+  const premounting = useMemo13(() => {
     return parentSequence?.premounting || Boolean(other._remotionInternalIsPremounting);
   }, [other._remotionInternalIsPremounting, parentSequence?.premounting]);
-  const postmounting = useMemo11(() => {
+  const postmounting = useMemo13(() => {
     return parentSequence?.postmounting || Boolean(other._remotionInternalIsPostmounting);
   }, [other._remotionInternalIsPostmounting, parentSequence?.postmounting]);
-  const contextValue = useMemo11(() => {
+  const contextValue = useMemo13(() => {
     return {
       cumulatedFrom,
       relativeFrom: from,
@@ -1477,12 +1806,12 @@ var RegularSequenceRefForwardingFunction = ({
     premountDisplay,
     postmountDisplay
   ]);
-  const timelineClipName = useMemo11(() => {
+  const timelineClipName = useMemo13(() => {
     return name ?? "";
   }, [name]);
   const env = useRemotionEnvironment();
   const inheritedStack = other?.stack ?? null;
-  useEffect(() => {
+  useEffect3(() => {
     if (!env.isStudio) {
       return;
     }
@@ -1529,7 +1858,7 @@ var RegularSequenceRefForwardingFunction = ({
   const endThreshold = Math.ceil(cumulatedFrom + from + durationInFrames - 1);
   const content = absoluteFrame < cumulatedFrom + from ? null : absoluteFrame > endThreshold ? null : children;
   const styleIfThere = other.layout === "none" ? undefined : other.style;
-  const defaultStyle = useMemo11(() => {
+  const defaultStyle = useMemo13(() => {
     return {
       flexDirection: undefined,
       ...width ? { width } : {},
@@ -1544,9 +1873,9 @@ var RegularSequenceRefForwardingFunction = ({
   if (isSequenceHidden) {
     return null;
   }
-  return /* @__PURE__ */ jsx8(SequenceContext.Provider, {
+  return /* @__PURE__ */ jsx11(SequenceContext.Provider, {
     value: contextValue,
-    children: content === null ? null : other.layout === "none" ? content : /* @__PURE__ */ jsx8(AbsoluteFill, {
+    children: content === null ? null : other.layout === "none" ? content : /* @__PURE__ */ jsx11(AbsoluteFill, {
       ref,
       style: defaultStyle,
       className: other.className,
@@ -1556,7 +1885,7 @@ var RegularSequenceRefForwardingFunction = ({
 };
 var RegularSequence = forwardRef2(RegularSequenceRefForwardingFunction);
 var PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
-  const parentPremountContext = useContext13(PremountContext);
+  const parentPremountContext = useContext15(PremountContext);
   const frame = useCurrentFrame() - parentPremountContext.premountFramesRemaining;
   if (props.layout === "none") {
     throw new Error('`<Sequence>` with `premountFor` and `postmountFor` props does not support layout="none"');
@@ -1576,7 +1905,7 @@ var PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
   const postmountingActive = frame > endThreshold && frame <= endThreshold + postmountFor;
   const freezeFrame = premountingActive ? from : postmountingActive ? from + durationInFrames - 1 : 0;
   const isFreezingActive = premountingActive || postmountingActive;
-  const style = useMemo11(() => {
+  const style = useMemo13(() => {
     return {
       ...passedStyle,
       opacity: premountingActive || postmountingActive ? 0 : 1,
@@ -1593,18 +1922,18 @@ var PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
   ]);
   const { playing } = useTimelineContext();
   const premountFramesRemaining = premountingActive ? from - frame : 0;
-  const premountContextValue = useMemo11(() => {
+  const premountContextValue = useMemo13(() => {
     return {
       premountFramesRemaining,
       playing: parentPremountContext.playing || playing
     };
   }, [premountFramesRemaining, parentPremountContext.playing, playing]);
-  return /* @__PURE__ */ jsx8(PremountContext.Provider, {
+  return /* @__PURE__ */ jsx11(PremountContext.Provider, {
     value: premountContextValue,
-    children: /* @__PURE__ */ jsx8(Freeze, {
+    children: /* @__PURE__ */ jsx11(Freeze, {
       frame: freezeFrame,
       active: isFreezingActive,
-      children: /* @__PURE__ */ jsx8(Sequence, {
+      children: /* @__PURE__ */ jsx11(Sequence, {
         ref,
         from,
         durationInFrames,
@@ -1625,14 +1954,14 @@ var SequenceRefForwardingFunction = (props, ref) => {
   if (props.layout !== "none" && !env.isRendering) {
     const effectivePremountFor = ENABLE_V5_BREAKING_CHANGES ? props.premountFor ?? fps : props.premountFor;
     if (effectivePremountFor || props.postmountFor) {
-      return /* @__PURE__ */ jsx8(PremountedPostmountedSequence, {
+      return /* @__PURE__ */ jsx11(PremountedPostmountedSequence, {
         ref,
         ...props,
         premountFor: effectivePremountFor
       });
     }
   }
-  return /* @__PURE__ */ jsx8(RegularSequence, {
+  return /* @__PURE__ */ jsx11(RegularSequence, {
     ...props,
     ref
   });
@@ -1641,16 +1970,16 @@ var Sequence = forwardRef2(SequenceRefForwardingFunction);
 // src/animated-image/AnimatedImage.tsx
 import {
   forwardRef as forwardRef3,
-  useEffect as useEffect2,
+  useEffect as useEffect4,
   useImperativeHandle as useImperativeHandle2,
   useLayoutEffect as useLayoutEffect2,
-  useRef as useRef5,
+  useRef as useRef6,
   useState as useState5
 } from "react";
 
 // src/animated-image/canvas.tsx
-import React10, { useCallback as useCallback5, useImperativeHandle, useRef as useRef4 } from "react";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import React12, { useCallback as useCallback5, useImperativeHandle, useRef as useRef5 } from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var calcArgs = (fit, frameSize, canvasSize) => {
   switch (fit) {
     case "fill": {
@@ -1700,7 +2029,7 @@ var calcArgs = (fit, frameSize, canvasSize) => {
   }
 };
 var CanvasRefForwardingFunction = ({ width, height, fit, className, style }, ref) => {
-  const canvasRef = useRef4(null);
+  const canvasRef = useRef5(null);
   const draw = useCallback5((imageData) => {
     const canvas = canvasRef.current;
     const canvasWidth = width ?? imageData.displayWidth;
@@ -1740,13 +2069,13 @@ var CanvasRefForwardingFunction = ({ width, height, fit, className, style }, ref
       }
     };
   }, [draw]);
-  return /* @__PURE__ */ jsx9("canvas", {
+  return /* @__PURE__ */ jsx12("canvas", {
     ref: canvasRef,
     className,
     style
   });
 };
-var Canvas = React10.forwardRef(CanvasRefForwardingFunction);
+var Canvas = React12.forwardRef(CanvasRefForwardingFunction);
 
 // src/animated-image/decode-image.ts
 var CACHE_SIZE = 5;
@@ -1899,7 +2228,7 @@ var resolveAnimatedImageSource = (src) => {
 };
 
 // src/animated-image/AnimatedImage.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var AnimatedImage = forwardRef3(({
   src,
   width,
@@ -1910,8 +2239,8 @@ var AnimatedImage = forwardRef3(({
   fit = "fill",
   ...props
 }, canvasRef) => {
-  const mountState = useRef5({ isMounted: true });
-  useEffect2(() => {
+  const mountState = useRef6({ isMounted: true });
+  useEffect4(() => {
     const { current } = mountState;
     current.isMounted = true;
     return () => {
@@ -1925,9 +2254,9 @@ var AnimatedImage = forwardRef3(({
   const frame = useCurrentFrame();
   const { fps } = useVideoConfig();
   const currentTime = frame / playbackRate / fps;
-  const currentTimeRef = useRef5(currentTime);
+  const currentTimeRef = useRef6(currentTime);
   currentTimeRef.current = currentTime;
-  const ref = useRef5(null);
+  const ref = useRef6(null);
   useImperativeHandle2(canvasRef, () => {
     const c = ref.current?.getCanvas();
     if (!c) {
@@ -1936,7 +2265,7 @@ var AnimatedImage = forwardRef3(({
     return c;
   }, []);
   const [initialLoopBehavior] = useState5(() => loopBehavior);
-  useEffect2(() => {
+  useEffect4(() => {
     const controller = new AbortController;
     decodeImage({
       resolvedSrc,
@@ -1999,7 +2328,7 @@ var AnimatedImage = forwardRef3(({
     continueRender2,
     delayRender2
   ]);
-  return /* @__PURE__ */ jsx10(Canvas, {
+  return /* @__PURE__ */ jsx13(Canvas, {
     ref,
     width,
     height,
@@ -2008,16 +2337,16 @@ var AnimatedImage = forwardRef3(({
   });
 });
 // src/Artifact.tsx
-import { useContext as useContext14, useLayoutEffect as useLayoutEffect4, useState as useState7 } from "react";
+import { useContext as useContext16, useLayoutEffect as useLayoutEffect4, useState as useState7 } from "react";
 
 // src/RenderAssetManager.tsx
 import {
-  createContext as createContext13,
+  createContext as createContext14,
   useCallback as useCallback6,
   useImperativeHandle as useImperativeHandle3,
   useLayoutEffect as useLayoutEffect3,
-  useMemo as useMemo12,
-  useRef as useRef6,
+  useMemo as useMemo14,
+  useRef as useRef7,
   useState as useState6
 } from "react";
 
@@ -2053,8 +2382,8 @@ var validateRenderAsset = (artifact) => {
 };
 
 // src/RenderAssetManager.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
-var RenderAssetManager = createContext13({
+import { jsx as jsx14 } from "react/jsx-runtime";
+var RenderAssetManager = createContext14({
   registerRenderAsset: () => {
     return;
   },
@@ -2065,7 +2394,7 @@ var RenderAssetManager = createContext13({
 });
 var RenderAssetManagerProvider = ({ children, collectAssets }) => {
   const [renderAssets, setRenderAssets] = useState6([]);
-  const renderAssetsRef = useRef6([]);
+  const renderAssetsRef = useRef7([]);
   const registerRenderAsset = useCallback6((renderAsset) => {
     validateRenderAsset(renderAsset);
     renderAssetsRef.current = [...renderAssetsRef.current, renderAsset];
@@ -2097,14 +2426,14 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
       };
     }
   }, []);
-  const contextValue = useMemo12(() => {
+  const contextValue = useMemo14(() => {
     return {
       registerRenderAsset,
       unregisterRenderAsset,
       renderAssets
     };
   }, [renderAssets, registerRenderAsset, unregisterRenderAsset]);
-  return /* @__PURE__ */ jsx11(RenderAssetManager.Provider, {
+  return /* @__PURE__ */ jsx14(RenderAssetManager.Provider, {
     value: contextValue,
     children
   });
@@ -2113,7 +2442,7 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
 // src/Artifact.tsx
 var ArtifactThumbnail = Symbol("Thumbnail");
 var Artifact = ({ filename, content, downloadBehavior }) => {
-  const { registerRenderAsset, unregisterRenderAsset } = useContext14(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext16(RenderAssetManager);
   const env = useRemotionEnvironment();
   const frame = useCurrentFrame();
   const [id] = useState7(() => {
@@ -2170,7 +2499,7 @@ var Artifact = ({ filename, content, downloadBehavior }) => {
 };
 Artifact.Thumbnail = ArtifactThumbnail;
 // src/audio/Audio.tsx
-import { forwardRef as forwardRef6, useCallback as useCallback11, useContext as useContext26 } from "react";
+import { forwardRef as forwardRef6, useCallback as useCallback11, useContext as useContext28 } from "react";
 
 // src/absolute-src.ts
 var getAbsoluteSrc = (relativeSrc) => {
@@ -2202,11 +2531,11 @@ var calculateMediaDuration = ({
 };
 
 // src/loop/index.tsx
-import React11, { createContext as createContext14, useMemo as useMemo13 } from "react";
-import { jsx as jsx12 } from "react/jsx-runtime";
-var LoopContext = createContext14(null);
+import React13, { createContext as createContext15, useMemo as useMemo15 } from "react";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var LoopContext = createContext15(null);
 var useLoop = () => {
-  return React11.useContext(LoopContext);
+  return React13.useContext(LoopContext);
 };
 var Loop = ({ durationInFrames, times = Infinity, children, name, ...props }) => {
   const currentFrame = useCurrentFrame();
@@ -2231,22 +2560,22 @@ var Loop = ({ durationInFrames, times = Infinity, children, name, ...props }) =>
   const iteration = Math.floor(currentFrame / durationInFrames);
   const start = iteration * durationInFrames;
   const from = Math.min(start, maxFrame);
-  const loopDisplay = useMemo13(() => {
+  const loopDisplay = useMemo15(() => {
     return {
       numberOfTimes: Math.min(compDuration / durationInFrames, times),
       startOffset: -from,
       durationInFrames
     };
   }, [compDuration, durationInFrames, from, times]);
-  const loopContext = useMemo13(() => {
+  const loopContext = useMemo15(() => {
     return {
       iteration: Math.floor(currentFrame / durationInFrames),
       durationInFrames
     };
   }, [currentFrame, durationInFrames]);
-  return /* @__PURE__ */ jsx12(LoopContext.Provider, {
+  return /* @__PURE__ */ jsx15(LoopContext.Provider, {
     value: loopContext,
-    children: /* @__PURE__ */ jsx12(Sequence, {
+    children: /* @__PURE__ */ jsx15(Sequence, {
       durationInFrames,
       from,
       name: name ?? "<Loop>",
@@ -2260,7 +2589,7 @@ var Loop = ({ durationInFrames, times = Infinity, children, name, ...props }) =>
 Loop.useLoop = useLoop;
 
 // src/prefetch.ts
-import { useContext as useContext15 } from "react";
+import { useContext as useContext17 } from "react";
 
 // src/playback-logging.ts
 var playbackLogging = ({
@@ -2274,9 +2603,9 @@ var playbackLogging = ({
 };
 
 // src/prefetch-state.tsx
-import { createContext as createContext15, useEffect as useEffect3, useState as useState8 } from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
-var PreloadContext = createContext15({});
+import { createContext as createContext16, useEffect as useEffect5, useState as useState8 } from "react";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var PreloadContext = createContext16({});
 var preloads = {};
 var updaters = [];
 var setPreloads = (updater) => {
@@ -2285,7 +2614,7 @@ var setPreloads = (updater) => {
 };
 var PrefetchProvider = ({ children }) => {
   const [_preloads, _setPreloads] = useState8(() => preloads);
-  useEffect3(() => {
+  useEffect5(() => {
     const updaterFunction = () => {
       _setPreloads(preloads);
     };
@@ -2294,7 +2623,7 @@ var PrefetchProvider = ({ children }) => {
       updaters = updaters.filter((u) => u !== updaterFunction);
     };
   }, []);
-  return /* @__PURE__ */ jsx13(PreloadContext.Provider, {
+  return /* @__PURE__ */ jsx16(PreloadContext.Provider, {
     value: _preloads,
     children
   });
@@ -2316,7 +2645,7 @@ var getSrcWithoutHash = (src) => {
   return src.slice(0, hashIndex);
 };
 var usePreload = (src) => {
-  const preloads2 = useContext15(PreloadContext);
+  const preloads2 = useContext17(PreloadContext);
   const hashFragmentIndex = removeAndGetHashFragment(src);
   const withoutHashFragment = getSrcWithoutHash(src);
   if (!preloads2[withoutHashFragment]) {
@@ -2589,8 +2918,8 @@ var resolveTrimProps = ({
 };
 
 // src/video/duration-state.tsx
-import { createContext as createContext16, useMemo as useMemo14, useReducer } from "react";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { createContext as createContext17, useMemo as useMemo16, useReducer } from "react";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var durationReducer = (state, action) => {
   switch (action.type) {
     case "got-duration": {
@@ -2607,7 +2936,7 @@ var durationReducer = (state, action) => {
       return state;
   }
 };
-var DurationsContext = createContext16({
+var DurationsContext = createContext17({
   durations: {},
   setDurations: () => {
     throw new Error("context missing");
@@ -2615,26 +2944,26 @@ var DurationsContext = createContext16({
 });
 var DurationsContextProvider = ({ children }) => {
   const [durations, setDurations] = useReducer(durationReducer, {});
-  const value = useMemo14(() => {
+  const value = useMemo16(() => {
     return {
       durations,
       setDurations
     };
   }, [durations]);
-  return /* @__PURE__ */ jsx14(DurationsContext.Provider, {
+  return /* @__PURE__ */ jsx17(DurationsContext.Provider, {
     value,
     children
   });
 };
 
 // src/audio/AudioForPreview.tsx
-import React17, {
+import React19, {
   forwardRef as forwardRef4,
-  useContext as useContext24,
-  useEffect as useEffect10,
+  useContext as useContext26,
+  useEffect as useEffect12,
   useImperativeHandle as useImperativeHandle4,
-  useMemo as useMemo22,
-  useRef as useRef14,
+  useMemo as useMemo24,
+  useRef as useRef15,
   useState as useState13
 } from "react";
 
@@ -2657,16 +2986,16 @@ var getCrossOriginValue = ({
 };
 
 // src/use-amplification.ts
-import { useContext as useContext17, useLayoutEffect as useLayoutEffect5, useRef as useRef9 } from "react";
+import { useContext as useContext19, useLayoutEffect as useLayoutEffect5, useRef as useRef10 } from "react";
 
 // src/audio/shared-audio-tags.tsx
-import React14, {
-  createContext as createContext17,
+import React16, {
+  createContext as createContext18,
   createRef as createRef2,
   useCallback as useCallback7,
-  useContext as useContext16,
-  useMemo as useMemo16,
-  useRef as useRef7,
+  useContext as useContext18,
+  useMemo as useMemo18,
+  useRef as useRef8,
   useState as useState9
 } from "react";
 
@@ -2766,7 +3095,7 @@ var makeSharedElementSourceNode = ({
 };
 
 // src/audio/use-audio-context.ts
-import { useMemo as useMemo15 } from "react";
+import { useMemo as useMemo17 } from "react";
 var warned = false;
 var warnOnce = (logLevel) => {
   if (warned) {
@@ -2783,7 +3112,7 @@ var useSingletonAudioContext = ({
   audioEnabled
 }) => {
   const env = useRemotionEnvironment();
-  const audioContext = useMemo15(() => {
+  const audioContext = useMemo17(() => {
     if (env.isRendering) {
       return null;
     }
@@ -2803,7 +3132,7 @@ var useSingletonAudioContext = ({
 };
 
 // src/audio/shared-audio-tags.tsx
-import { jsx as jsx15, jsxs } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs2 } from "react/jsx-runtime";
 var EMPTY_AUDIO = "data:audio/mp3;base64,/+MYxAAJcAV8AAgAABn//////+/gQ5BAMA+D4Pg+BAQBAEAwD4Pg+D4EBAEAQDAPg++hYBH///hUFQVBUFREDQNHmf///////+MYxBUGkAGIMAAAAP/29Xt6lUxBTUUzLjEwMFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV/+MYxDUAAANIAAAAAFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV";
 var compareProps = (obj1, obj2) => {
   const keysA = Object.keys(obj1).sort();
@@ -2830,9 +3159,9 @@ var didPropChange = (key, newProp, prevProp) => {
   }
   return true;
 };
-var SharedAudioContext = createContext17(null);
+var SharedAudioContext = createContext18(null);
 var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHint, audioEnabled }) => {
-  const audios = useRef7([]);
+  const audios = useRef8([]);
   const [initialNumberOfAudioTags] = useState9(numberOfAudioTags);
   if (numberOfAudioTags !== initialNumberOfAudioTags) {
     throw new Error("The number of shared audio tags has changed dynamically. Once you have set this property, you cannot change it afterwards.");
@@ -2843,9 +3172,9 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
     latencyHint: audioLatencyHint,
     audioEnabled
   });
-  const audioSyncAnchor = useMemo16(() => ({ value: 0 }), []);
-  const prevEndTimes = useRef7({ scheduledEndTime: null, mediaEndTime: null });
-  const scheduleAudioNode = useMemo16(() => {
+  const audioSyncAnchor = useMemo18(() => ({ value: 0 }), []);
+  const prevEndTimes = useRef8({ scheduledEndTime: null, mediaEndTime: null });
+  const scheduleAudioNode = useMemo18(() => {
     return ({
       node,
       mediaTimestamp,
@@ -2900,7 +3229,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
       };
     };
   }, [audioContext, logLevel]);
-  const refs = useMemo16(() => {
+  const refs = useMemo18(() => {
     return new Array(numberOfAudioTags).fill(true).map(() => {
       const ref = createRef2();
       return {
@@ -2913,7 +3242,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
       };
     });
   }, [audioContext, numberOfAudioTags]);
-  const effectToUse = React14.useInsertionEffect ?? React14.useLayoutEffect;
+  const effectToUse = React16.useInsertionEffect ?? React16.useLayoutEffect;
   effectToUse(() => {
     return () => {
       requestAnimationFrame(() => {
@@ -2923,7 +3252,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
       });
     };
   }, [refs]);
-  const takenAudios = useRef7(new Array(numberOfAudioTags).fill(false));
+  const takenAudios = useRef8(new Array(numberOfAudioTags).fill(false));
   const rerenderAudios = useCallback7(() => {
     refs.forEach(({ ref, id }) => {
       const data = audios.current?.find((a) => a.id === id);
@@ -3039,7 +3368,7 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
     });
     audioContext?.resume();
   }, [audioContext, logLevel, mountTime, refs, env.isPlayer]);
-  const value = useMemo16(() => {
+  const value = useMemo18(() => {
     return {
       registerAudio,
       unregisterAudio,
@@ -3060,11 +3389,11 @@ var SharedAudioContextProvider = ({ children, numberOfAudioTags, audioLatencyHin
     audioSyncAnchor,
     scheduleAudioNode
   ]);
-  return /* @__PURE__ */ jsxs(SharedAudioContext.Provider, {
+  return /* @__PURE__ */ jsxs2(SharedAudioContext.Provider, {
     value,
     children: [
       refs.map(({ id, ref }) => {
-        return /* @__PURE__ */ jsx15("audio", {
+        return /* @__PURE__ */ jsx18("audio", {
           ref,
           preload: "metadata",
           src: EMPTY_AUDIO
@@ -3080,12 +3409,12 @@ var useSharedAudio = ({
   premounting,
   postmounting
 }) => {
-  const ctx = useContext16(SharedAudioContext);
+  const ctx = useContext18(SharedAudioContext);
   const [elem] = useState9(() => {
     if (ctx && ctx.numberOfAudioTags > 0) {
       return ctx.registerAudio({ aud, audioId, premounting, postmounting });
     }
-    const el = React14.createRef();
+    const el = React16.createRef();
     const mediaElementSourceNode = ctx?.audioContext ? makeSharedElementSourceNode({
       audioContext: ctx.audioContext,
       ref: el
@@ -3104,7 +3433,7 @@ var useSharedAudio = ({
       }
     };
   });
-  const effectToUse = React14.useInsertionEffect ?? React14.useLayoutEffect;
+  const effectToUse = React16.useInsertionEffect ?? React16.useLayoutEffect;
   if (typeof document !== "undefined") {
     effectToUse(() => {
       if (ctx && ctx.numberOfAudioTags > 0) {
@@ -3129,7 +3458,7 @@ var isApproximatelyTheSame = (num1, num2) => {
 };
 
 // src/video/video-fragment.ts
-import { useRef as useRef8 } from "react";
+import { useRef as useRef9 } from "react";
 var toSeconds = (time, fps) => {
   return Math.round(time / fps * 100) / 100;
 };
@@ -3216,9 +3545,9 @@ var useAppendVideoFragment = ({
   duration: initialDuration,
   fps
 }) => {
-  const actualFromRef = useRef8(initialActualFrom);
-  const actualDuration = useRef8(initialDuration);
-  const actualSrc = useRef8(initialActualSrc);
+  const actualFromRef = useRef9(initialActualFrom);
+  const actualDuration = useRef9(initialDuration);
+  const actualSrc = useRef9(initialActualSrc);
   if (!isSubsetOfDuration({
     prevStartFrom: actualFromRef.current,
     newStartFrom: initialActualFrom,
@@ -3257,10 +3586,10 @@ var useVolume = ({
   source,
   shouldUseWebAudioApi
 }) => {
-  const audioStuffRef = useRef9(null);
-  const currentVolumeRef = useRef9(volume);
+  const audioStuffRef = useRef10(null);
+  const currentVolumeRef = useRef10(volume);
   currentVolumeRef.current = volume;
-  const sharedAudioContext = useContext17(SharedAudioContext);
+  const sharedAudioContext = useContext19(SharedAudioContext);
   if (!sharedAudioContext) {
     throw new Error("useAmplification must be used within a SharedAudioContext");
   }
@@ -3316,12 +3645,12 @@ var useVolume = ({
 };
 
 // src/use-media-in-timeline.ts
-import { useContext as useContext19, useEffect as useEffect4, useMemo as useMemo17, useState as useState10 } from "react";
+import { useContext as useContext21, useEffect as useEffect6, useMemo as useMemo19, useState as useState10 } from "react";
 
 // src/audio/use-audio-frame.ts
-import { useContext as useContext18 } from "react";
+import { useContext as useContext20 } from "react";
 var useMediaStartsAt = () => {
-  const parentSequence = useContext18(SequenceContext);
+  const parentSequence = useContext20(SequenceContext);
   const startsAt = Math.min(0, parentSequence?.relativeFrom ?? 0);
   return startsAt;
 };
@@ -3392,7 +3721,7 @@ var useBasicMediaInTimeline = ({
     throw new Error("No src passed");
   }
   const startsAt = useMediaStartsAt();
-  const parentSequence = useContext19(SequenceContext);
+  const parentSequence = useContext21(SequenceContext);
   const videoConfig = useVideoConfig();
   const [initialVolume] = useState10(() => volume);
   const mediaDuration = calculateMediaDuration({
@@ -3402,7 +3731,7 @@ var useBasicMediaInTimeline = ({
     trimAfter
   });
   const duration = parentSequence ? Math.min(parentSequence.durationInFrames, mediaDuration) : mediaDuration;
-  const volumes = useMemo17(() => {
+  const volumes = useMemo19(() => {
     if (typeof volume === "number") {
       return volume;
     }
@@ -3414,7 +3743,7 @@ var useBasicMediaInTimeline = ({
       });
     }).join(",");
   }, [duration, startsAt, volume, mediaVolume]);
-  useEffect4(() => {
+  useEffect6(() => {
     if (typeof volume === "number" && volume !== initialVolume) {
       warnOnce2(`Remotion: The ${mediaType} with src ${src} has changed it's volume. Prefer the callback syntax for setting volume to get better timeline display: https://www.remotion.dev/docs/audio/volume`);
     }
@@ -3441,10 +3770,11 @@ var useImageInTimeline = ({
   showInTimeline,
   premountDisplay,
   postmountDisplay,
-  loopDisplay
+  loopDisplay,
+  controls
 }) => {
-  const parentSequence = useContext19(SequenceContext);
-  const { registerSequence, unregisterSequence } = useContext19(SequenceManager);
+  const parentSequence = useContext21(SequenceContext);
+  const { registerSequence, unregisterSequence } = useContext21(SequenceManager);
   const { duration, nonce, rootId, isStudio, finalDisplayName } = useBasicMediaInTimeline({
     volume: undefined,
     mediaVolume: 0,
@@ -3455,7 +3785,7 @@ var useImageInTimeline = ({
     trimBefore: undefined,
     playbackRate: 1
   });
-  useEffect4(() => {
+  useEffect6(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -3480,7 +3810,7 @@ var useImageInTimeline = ({
       stack,
       premountDisplay,
       postmountDisplay,
-      controls: null
+      controls
     });
     return () => {
       unregisterSequence(id);
@@ -3500,7 +3830,8 @@ var useImageInTimeline = ({
     isStudio,
     loopDisplay,
     rootId,
-    finalDisplayName
+    finalDisplayName,
+    controls
   ]);
 };
 var useMediaInTimeline = ({
@@ -3517,9 +3848,9 @@ var useMediaInTimeline = ({
   postmountDisplay,
   loopDisplay
 }) => {
-  const parentSequence = useContext19(SequenceContext);
+  const parentSequence = useContext21(SequenceContext);
   const startsAt = useMediaStartsAt();
-  const { registerSequence, unregisterSequence } = useContext19(SequenceManager);
+  const { registerSequence, unregisterSequence } = useContext21(SequenceManager);
   const {
     volumes,
     duration,
@@ -3538,7 +3869,7 @@ var useMediaInTimeline = ({
     trimBefore: undefined,
     playbackRate
   });
-  useEffect4(() => {
+  useEffect6(() => {
     if (!src) {
       throw new Error("No src passed");
     }
@@ -3599,36 +3930,36 @@ var useMediaInTimeline = ({
 // src/use-media-playback.ts
 import {
   useCallback as useCallback10,
-  useContext as useContext22,
-  useEffect as useEffect8,
+  useContext as useContext24,
+  useEffect as useEffect10,
   useLayoutEffect as useLayoutEffect7,
-  useRef as useRef13
+  useRef as useRef14
 } from "react";
 
 // src/buffer-until-first-frame.ts
-import { useCallback as useCallback9, useMemo as useMemo20, useRef as useRef11 } from "react";
+import { useCallback as useCallback9, useMemo as useMemo22, useRef as useRef12 } from "react";
 
 // src/use-buffer-state.ts
-import { useContext as useContext21, useMemo as useMemo19 } from "react";
+import { useContext as useContext23, useMemo as useMemo21 } from "react";
 
 // src/buffering.tsx
-import React15, {
+import React17, {
   useCallback as useCallback8,
-  useContext as useContext20,
-  useEffect as useEffect5,
+  useContext as useContext22,
+  useEffect as useEffect7,
   useLayoutEffect as useLayoutEffect6,
-  useMemo as useMemo18,
-  useRef as useRef10,
+  useMemo as useMemo20,
+  useRef as useRef11,
   useState as useState11
 } from "react";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var useBufferManager = (logLevel, mountTime) => {
   const [blocks, setBlocks] = useState11([]);
   const [onBufferingCallbacks, setOnBufferingCallbacks] = useState11([]);
   const [onResumeCallbacks, setOnResumeCallbacks] = useState11([]);
   const env = useRemotionEnvironment();
   const rendering = env.isRendering;
-  const buffering = useRef10(false);
+  const buffering = useRef11(false);
   const addBlock = useCallback8((block) => {
     if (rendering) {
       return {
@@ -3666,7 +3997,7 @@ var useBufferManager = (logLevel, mountTime) => {
       }
     };
   }, []);
-  useEffect5(() => {
+  useEffect7(() => {
     if (rendering) {
       return;
     }
@@ -3696,22 +4027,22 @@ var useBufferManager = (logLevel, mountTime) => {
       }
     }, [blocks]);
   }
-  return useMemo18(() => {
+  return useMemo20(() => {
     return { addBlock, listenForBuffering, listenForResume, buffering };
   }, [addBlock, buffering, listenForBuffering, listenForResume]);
 };
-var BufferingContextReact = React15.createContext(null);
+var BufferingContextReact = React17.createContext(null);
 var BufferingProvider = ({ children }) => {
-  const { logLevel, mountTime } = useContext20(LogLevelContext);
+  const { logLevel, mountTime } = useContext22(LogLevelContext);
   const bufferManager = useBufferManager(logLevel ?? "info", mountTime);
-  return /* @__PURE__ */ jsx16(BufferingContextReact.Provider, {
+  return /* @__PURE__ */ jsx19(BufferingContextReact.Provider, {
     value: bufferManager,
     children
   });
 };
 var useIsPlayerBuffering = (bufferManager) => {
   const [isBuffering, setIsBuffering] = useState11(bufferManager.buffering.current);
-  useEffect5(() => {
+  useEffect7(() => {
     const onBuffer = () => {
       setIsBuffering(true);
     };
@@ -3734,9 +4065,9 @@ var useIsPlayerBuffering = (bufferManager) => {
 
 // src/use-buffer-state.ts
 var useBufferState = () => {
-  const buffer = useContext21(BufferingContextReact);
+  const buffer = useContext23(BufferingContextReact);
   const addBlock = buffer ? buffer.addBlock : null;
-  return useMemo19(() => ({
+  return useMemo21(() => ({
     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");
@@ -3762,7 +4093,7 @@ var useBufferUntilFirstFrame = ({
   logLevel,
   mountTime
 }) => {
-  const bufferingRef = useRef11(false);
+  const bufferingRef = useRef12(false);
   const { delayPlayback } = useBufferState();
   const bufferUntilFirstFrame = useCallback9((requestedTime) => {
     if (mediaType !== "video") {
@@ -3835,7 +4166,7 @@ var useBufferUntilFirstFrame = ({
     onVariableFpsVideoDetected,
     pauseWhenBuffering
   ]);
-  return useMemo20(() => {
+  return useMemo22(() => {
     return {
       isBuffering: () => bufferingRef.current,
       bufferUntilFirstFrame
@@ -3844,9 +4175,9 @@ var useBufferUntilFirstFrame = ({
 };
 
 // src/media-tag-current-time-timestamp.ts
-import React16 from "react";
+import React18 from "react";
 var useCurrentTimeOfMediaTagWithUpdateTimeStamp = (mediaRef) => {
-  const lastUpdate = React16.useRef({
+  const lastUpdate = React18.useRef({
     time: mediaRef.current?.currentTime ?? 0,
     lastUpdate: performance.now()
   });
@@ -3880,7 +4211,7 @@ var seek = ({
 };
 
 // src/use-media-buffering.ts
-import { useEffect as useEffect6, useState as useState12 } from "react";
+import { useEffect as useEffect8, useState as useState12 } from "react";
 var useMediaBuffering = ({
   element,
   shouldBuffer,
@@ -3892,7 +4223,7 @@ var useMediaBuffering = ({
 }) => {
   const buffer = useBufferState();
   const [isBuffering, setIsBuffering] = useState12(false);
-  useEffect6(() => {
+  useEffect8(() => {
     let cleanupFns = [];
     const { current } = element;
     if (!current) {
@@ -4020,15 +4351,15 @@ var useMediaBuffering = ({
 };
 
 // src/use-request-video-callback-time.ts
-import { useEffect as useEffect7, useRef as useRef12 } from "react";
+import { useEffect as useEffect9, useRef as useRef13 } from "react";
 var useRequestVideoCallbackTime = ({
   mediaRef,
   mediaType,
   lastSeek,
   onVariableFpsVideoDetected
 }) => {
-  const currentTime = useRef12(null);
-  useEffect7(() => {
+  const currentTime = useRef13(null);
+  useEffect9(() => {
     const { current } = mediaRef;
     if (current) {
       currentTime.current = {
@@ -4260,17 +4591,17 @@ var useMediaPlayback = ({
   const frame = useCurrentFrame();
   const absoluteFrame = useTimelinePosition();
   const [playing] = usePlayingState();
-  const buffering = useContext22(BufferingContextReact);
+  const buffering = useContext24(BufferingContextReact);
   const { fps } = useVideoConfig();
   const mediaStartsAt = useMediaStartsAt();
-  const lastSeekDueToShift = useRef13(null);
-  const lastSeek = useRef13(null);
+  const lastSeekDueToShift = useRef14(null);
+  const lastSeek = useRef14(null);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   if (!buffering) {
     throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
   }
-  const isVariableFpsVideoMap = useRef13({});
+  const isVariableFpsVideoMap = useRef14({});
   const onVariableFpsVideoDetected = useCallback10(() => {
     if (!src) {
       return;
@@ -4322,7 +4653,7 @@ var useMediaPlayback = ({
     return acceptableTimeshift ?? defaultAcceptableTimeshift;
   })();
   const isPlayerBuffering = useIsPlayerBuffering(buffering);
-  useEffect8(() => {
+  useEffect10(() => {
     if (mediaRef.current?.paused) {
       return;
     }
@@ -4367,7 +4698,7 @@ var useMediaPlayback = ({
       mediaRef.current.playbackRate = playbackRateToSet;
     }
   }, [mediaRef, playbackRate]);
-  useEffect8(() => {
+  useEffect10(() => {
     const tagName = mediaType === "audio" ? "<Html5Audio>" : "<Html5Video>";
     if (!mediaRef.current) {
       throw new Error(`No ${mediaType} ref found`);
@@ -4486,7 +4817,7 @@ var useMediaPlayback = ({
 };
 
 // src/use-media-tag.ts
-import { useEffect as useEffect9 } from "react";
+import { useEffect as useEffect11 } from "react";
 var useMediaTag = ({
   mediaRef,
   id,
@@ -4499,7 +4830,7 @@ var useMediaTag = ({
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const env = useRemotionEnvironment();
-  useEffect9(() => {
+  useEffect11(() => {
     const tag = {
       id,
       play: (reason) => {
@@ -4540,12 +4871,12 @@ var useMediaTag = ({
 };
 
 // src/volume-position-state.ts
-import { createContext as createContext18, useContext as useContext23, useMemo as useMemo21 } from "react";
-var MediaVolumeContext = createContext18({
+import { createContext as createContext19, useContext as useContext25, useMemo as useMemo23 } from "react";
+var MediaVolumeContext = createContext19({
   mediaMuted: false,
   mediaVolume: 1
 });
-var SetMediaVolumeContext = createContext18({
+var SetMediaVolumeContext = createContext19({
   setMediaMuted: () => {
     throw new Error("default");
   },
@@ -4554,16 +4885,16 @@ var SetMediaVolumeContext = createContext18({
   }
 });
 var useMediaVolumeState = () => {
-  const { mediaVolume } = useContext23(MediaVolumeContext);
-  const { setMediaVolume } = useContext23(SetMediaVolumeContext);
-  return useMemo21(() => {
+  const { mediaVolume } = useContext25(MediaVolumeContext);
+  const { setMediaVolume } = useContext25(SetMediaVolumeContext);
+  return useMemo23(() => {
     return [mediaVolume, setMediaVolume];
   }, [mediaVolume, setMediaVolume]);
 };
 var useMediaMutedState = () => {
-  const { mediaMuted } = useContext23(MediaVolumeContext);
-  const { setMediaMuted } = useContext23(SetMediaVolumeContext);
-  return useMemo21(() => {
+  const { mediaMuted } = useContext25(MediaVolumeContext);
+  const { setMediaMuted } = useContext25(SetMediaVolumeContext);
+  return useMemo23(() => {
     return [mediaMuted, setMediaMuted];
   }, [mediaMuted, setMediaMuted]);
 };
@@ -4576,7 +4907,7 @@ var warnAboutTooHighVolume = (volume) => {
 };
 
 // src/audio/AudioForPreview.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var AudioForDevelopmentForwardRefFunction = (props, ref) => {
   const [initialShouldPreMountAudioElements] = useState13(props.shouldPreMountAudioTags);
   if (props.shouldPreMountAudioTags !== initialShouldPreMountAudioElements) {
@@ -4617,12 +4948,12 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
   const [mediaVolume] = useMediaVolumeState();
   const [mediaMuted] = useMediaMutedState();
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
-  const { hidden } = useContext24(SequenceVisibilityToggleContext);
+  const { hidden } = useContext26(SequenceVisibilityToggleContext);
   if (!src) {
     throw new TypeError("No 'src' was passed to <Html5Audio>.");
   }
   const preloadedSrc = usePreload(src);
-  const sequenceContext = useContext24(SequenceContext);
+  const sequenceContext = useContext26(SequenceContext);
   const [timelineId] = useState13(() => String(Math.random()));
   const isSequenceHidden = hidden[timelineId] ?? false;
   const userPreferredVolume = evaluateVolume({
@@ -4636,7 +4967,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     requestsVideoFrame: false,
     isClientSideRendering: false
   });
-  const propsToPass = useMemo22(() => {
+  const propsToPass = useMemo24(() => {
     return {
       muted: muted || mediaMuted || isSequenceHidden || userPreferredVolume <= 0,
       src: preloadedSrc,
@@ -4654,7 +4985,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     userPreferredVolume,
     crossOriginValue
   ]);
-  const id = useMemo22(() => `audio-${random(src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}-muted:${props.muted}-loop:${props.loop}`, [
+  const id = useMemo24(() => `audio-${random(src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}-muted:${props.muted}-loop:${props.loop}`, [
     src,
     sequenceContext?.relativeFrom,
     sequenceContext?.cumulatedFrom,
@@ -4713,7 +5044,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     volume: userPreferredVolume,
     shouldUseWebAudioApi: useWebAudioApi ?? false
   });
-  const effectToUse = React17.useInsertionEffect ?? React17.useLayoutEffect;
+  const effectToUse = React19.useInsertionEffect ?? React19.useLayoutEffect;
   effectToUse(() => {
     return () => {
       requestAnimationFrame(() => {
@@ -4724,627 +5055,298 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
   useImperativeHandle4(ref, () => {
     return audioRef.current;
   }, [audioRef]);
-  const currentOnDurationCallback = useRef14(onDuration);
+  const currentOnDurationCallback = useRef15(onDuration);
   currentOnDurationCallback.current = onDuration;
-  useEffect10(() => {
+  useEffect12(() => {
     const { current } = audioRef;
     if (!current) {
       return;
     }
-    if (current.duration) {
-      currentOnDurationCallback.current?.(current.src, current.duration);
-      return;
-    }
-    const onLoadedMetadata = () => {
-      currentOnDurationCallback.current?.(current.src, current.duration);
-    };
-    current.addEventListener("loadedmetadata", onLoadedMetadata);
-    return () => {
-      current.removeEventListener("loadedmetadata", onLoadedMetadata);
-    };
-  }, [audioRef, src]);
-  if (initialShouldPreMountAudioElements) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx17("audio", {
-    ref: audioRef,
-    preload: "metadata",
-    crossOrigin: crossOriginValue,
-    ...propsToPass
-  });
-};
-var AudioForPreview = forwardRef4(AudioForDevelopmentForwardRefFunction);
-
-// src/audio/AudioForRendering.tsx
-import {
-  forwardRef as forwardRef5,
-  useContext as useContext25,
-  useEffect as useEffect11,
-  useImperativeHandle as useImperativeHandle5,
-  useLayoutEffect as useLayoutEffect8,
-  useMemo as useMemo23,
-  useRef as useRef15
-} from "react";
-import { jsx as jsx18 } from "react/jsx-runtime";
-var AudioForRenderingRefForwardingFunction = (props, ref) => {
-  const audioRef = useRef15(null);
-  const {
-    volume: volumeProp,
-    playbackRate,
-    allowAmplificationDuringRender,
-    onDuration,
-    toneFrequency,
-    _remotionInternalNeedsDurationCalculation,
-    _remotionInternalNativeLoopPassed,
-    acceptableTimeShiftInSeconds,
-    name,
-    onNativeError,
-    delayRenderRetries,
-    delayRenderTimeoutInMilliseconds,
-    loopVolumeCurveBehavior,
-    pauseWhenBuffering,
-    audioStreamIndex,
-    ...nativeProps
-  } = props;
-  const absoluteFrame = useTimelinePosition();
-  const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
-  const frame = useCurrentFrame();
-  const sequenceContext = useContext25(SequenceContext);
-  const { registerRenderAsset, unregisterRenderAsset } = useContext25(RenderAssetManager);
-  const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const id = useMemo23(() => `audio-${random(props.src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}`, [
-    props.src,
-    sequenceContext?.relativeFrom,
-    sequenceContext?.cumulatedFrom,
-    sequenceContext?.durationInFrames
-  ]);
-  const volume = evaluateVolume({
-    volume: volumeProp,
-    frame: volumePropFrame,
-    mediaVolume: 1
-  });
-  warnAboutTooHighVolume(volume);
-  useImperativeHandle5(ref, () => {
-    return audioRef.current;
-  }, []);
-  useEffect11(() => {
-    if (!props.src) {
-      throw new Error("No src passed");
-    }
-    if (!window.remotion_audioEnabled) {
-      return;
-    }
-    if (props.muted) {
-      return;
-    }
-    if (volume <= 0) {
-      return;
-    }
-    registerRenderAsset({
-      type: "audio",
-      src: getAbsoluteSrc(props.src),
-      id,
-      frame: absoluteFrame,
-      volume,
-      mediaFrame: frame,
-      playbackRate: props.playbackRate ?? 1,
-      toneFrequency: toneFrequency ?? 1,
-      audioStartFrame: Math.max(0, -(sequenceContext?.relativeFrom ?? 0)),
-      audioStreamIndex: audioStreamIndex ?? 0
-    });
-    return () => unregisterRenderAsset(id);
-  }, [
-    props.muted,
-    props.src,
-    registerRenderAsset,
-    absoluteFrame,
-    id,
-    unregisterRenderAsset,
-    volume,
-    volumePropFrame,
-    frame,
-    playbackRate,
-    props.playbackRate,
-    toneFrequency,
-    sequenceContext?.relativeFrom,
-    audioStreamIndex
-  ]);
-  const { src } = props;
-  const needsToRenderAudioTag = ref || _remotionInternalNeedsDurationCalculation;
-  useLayoutEffect8(() => {
-    if (window.process?.env?.NODE_ENV === "test") {
-      return;
-    }
-    if (!needsToRenderAudioTag) {
-      return;
-    }
-    const newHandle = delayRender2("Loading <Html5Audio> duration with src=" + src, {
-      retries: delayRenderRetries ?? undefined,
-      timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
-    });
-    const { current } = audioRef;
-    const didLoad = () => {
-      if (current?.duration) {
-        onDuration(current.src, current.duration);
-      }
-      continueRender2(newHandle);
-    };
-    if (current?.duration) {
-      onDuration(current.src, current.duration);
-      continueRender2(newHandle);
-    } else {
-      current?.addEventListener("loadedmetadata", didLoad, { once: true });
-    }
-    return () => {
-      current?.removeEventListener("loadedmetadata", didLoad);
-      continueRender2(newHandle);
-    };
-  }, [
-    src,
-    onDuration,
-    needsToRenderAudioTag,
-    delayRenderRetries,
-    delayRenderTimeoutInMilliseconds,
-    continueRender2,
-    delayRender2
-  ]);
-  if (!needsToRenderAudioTag) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx18("audio", {
-    ref: audioRef,
-    ...nativeProps,
-    onError: onNativeError
-  });
-};
-var AudioForRendering = forwardRef5(AudioForRenderingRefForwardingFunction);
-
-// src/audio/Audio.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
-var AudioRefForwardingFunction = (props, ref) => {
-  const audioContext = useContext26(SharedAudioContext);
-  const {
-    startFrom,
-    endAt,
-    trimBefore,
-    trimAfter,
-    name,
-    stack,
-    pauseWhenBuffering,
-    showInTimeline,
-    onError: onRemotionError,
-    ...otherProps
-  } = props;
-  const { loop, ...propsOtherThanLoop } = props;
-  const { fps } = useVideoConfig();
-  const environment = useRemotionEnvironment();
-  if (environment.isClientSideRendering) {
-    throw new Error("<Html5Audio> is not supported in @remotion/web-renderer. Use <Audio> from @remotion/media instead. See https://remotion.dev/docs/client-side-rendering/limitations");
-  }
-  const { durations, setDurations } = useContext26(DurationsContext);
-  if (typeof props.src !== "string") {
-    throw new TypeError(`The \`<Html5Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
-  }
-  const preloadedSrc = usePreload(props.src);
-  const onError = useCallback11((e) => {
-    console.log(e.currentTarget.error);
-    const errMessage = `Could not play audio with src ${preloadedSrc}: ${e.currentTarget.error}. See https://remotion.dev/docs/media-playback-error for help.`;
-    if (loop) {
-      if (onRemotionError) {
-        onRemotionError(new Error(errMessage));
-        return;
-      }
-      cancelRender(new Error(errMessage));
-    } else {
-      onRemotionError?.(new Error(errMessage));
-      console.warn(errMessage);
-    }
-  }, [loop, onRemotionError, preloadedSrc]);
-  const onDuration = useCallback11((src, durationInSeconds) => {
-    setDurations({ type: "got-duration", durationInSeconds, src });
-  }, [setDurations]);
-  const durationFetched = durations[getAbsoluteSrc(preloadedSrc)] ?? durations[getAbsoluteSrc(props.src)];
-  validateMediaTrimProps({ startFrom, endAt, trimBefore, trimAfter });
-  const { trimBeforeValue, trimAfterValue } = resolveTrimProps({
-    startFrom,
-    endAt,
-    trimBefore,
-    trimAfter
-  });
-  if (loop && durationFetched !== undefined) {
-    if (!Number.isFinite(durationFetched)) {
-      return /* @__PURE__ */ jsx19(Html5Audio, {
-        ...propsOtherThanLoop,
-        ref,
-        _remotionInternalNativeLoopPassed: true
-      });
-    }
-    const duration = durationFetched * fps;
-    return /* @__PURE__ */ jsx19(Loop, {
-      layout: "none",
-      durationInFrames: calculateMediaDuration({
-        trimAfter: trimAfterValue,
-        mediaDurationInFrames: duration,
-        playbackRate: props.playbackRate ?? 1,
-        trimBefore: trimBeforeValue
-      }),
-      children: /* @__PURE__ */ jsx19(Html5Audio, {
-        ...propsOtherThanLoop,
-        ref,
-        _remotionInternalNativeLoopPassed: true
-      })
-    });
-  }
-  if (typeof trimBeforeValue !== "undefined" || typeof trimAfterValue !== "undefined") {
-    return /* @__PURE__ */ jsx19(Sequence, {
-      layout: "none",
-      from: 0 - (trimBeforeValue ?? 0),
-      showInTimeline: false,
-      durationInFrames: trimAfterValue,
-      name,
-      children: /* @__PURE__ */ jsx19(Html5Audio, {
-        _remotionInternalNeedsDurationCalculation: Boolean(loop),
-        pauseWhenBuffering: pauseWhenBuffering ?? false,
-        ...otherProps,
-        ref
-      })
-    });
-  }
-  validateMediaProps({ playbackRate: props.playbackRate, volume: props.volume }, "Html5Audio");
-  if (environment.isRendering) {
-    return /* @__PURE__ */ jsx19(AudioForRendering, {
-      onDuration,
-      ...props,
-      ref,
-      onNativeError: onError,
-      _remotionInternalNeedsDurationCalculation: Boolean(loop)
-    });
-  }
-  return /* @__PURE__ */ jsx19(AudioForPreview, {
-    _remotionInternalNativeLoopPassed: props._remotionInternalNativeLoopPassed ?? false,
-    _remotionInternalStack: stack ?? null,
-    shouldPreMountAudioTags: audioContext !== null && audioContext.numberOfAudioTags > 0,
-    ...props,
-    ref,
-    onNativeError: onError,
-    onDuration,
-    pauseWhenBuffering: pauseWhenBuffering ?? false,
-    _remotionInternalNeedsDurationCalculation: Boolean(loop),
-    showInTimeline: showInTimeline ?? true
-  });
-};
-var Html5Audio = forwardRef6(AudioRefForwardingFunction);
-addSequenceStackTraces(Html5Audio);
-var Audio = Html5Audio;
-// src/Composition.tsx
-import { Suspense, useContext as useContext28, useEffect as useEffect13 } from "react";
-import { createPortal } from "react-dom";
-
-// src/Folder.tsx
-import { createContext as createContext19, useContext as useContext27, useEffect as useEffect12, useMemo as useMemo24 } from "react";
-
-// src/validation/validate-folder-name.ts
-var getRegex = () => /^([a-zA-Z0-9-\u4E00-\u9FFF])+$/g;
-var isFolderNameValid = (name) => name.match(getRegex());
-var validateFolderName = (name) => {
-  if (name === undefined || name === null) {
-    throw new TypeError("You must pass a name to a <Folder />.");
-  }
-  if (typeof name !== "string") {
-    throw new TypeError(`The "name" you pass into <Folder /> must be a string. Got: ${typeof name}`);
-  }
-  if (!isFolderNameValid(name)) {
-    throw new Error(`Folder name can only contain a-z, A-Z, 0-9 and -. You passed ${name}`);
-  }
-};
-var invalidFolderNameErrorMessage = `Folder name must match ${String(getRegex())}`;
-
-// src/Folder.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
-var FolderContext = createContext19({
-  folderName: null,
-  parentName: null
-});
-var Folder = ({ name, children }) => {
-  const parent = useContext27(FolderContext);
-  const { registerFolder, unregisterFolder } = useContext27(CompositionSetters);
-  const nonce = useNonce();
-  validateFolderName(name);
-  const parentNameArr = [parent.parentName, parent.folderName].filter(truthy);
-  const parentName = parentNameArr.length === 0 ? null : parentNameArr.join("/");
-  const value = useMemo24(() => {
-    return {
-      folderName: name,
-      parentName
-    };
-  }, [name, parentName]);
-  useEffect12(() => {
-    registerFolder(name, parentName, nonce.get());
-    return () => {
-      unregisterFolder(name, parentName);
-    };
-  }, [
-    name,
-    parent.folderName,
-    parentName,
-    registerFolder,
-    unregisterFolder,
-    nonce
-  ]);
-  return /* @__PURE__ */ jsx20(FolderContext.Provider, {
-    value,
-    children
-  });
-};
-
-// src/loading-indicator.tsx
-import { jsx as jsx21, jsxs as jsxs2 } from "react/jsx-runtime";
-var rotate = {
-  transform: `rotate(90deg)`
-};
-var ICON_SIZE = 40;
-var label = {
-  color: "white",
-  fontSize: 14,
-  fontFamily: "sans-serif"
-};
-var container = {
-  justifyContent: "center",
-  alignItems: "center"
-};
-var Loading = () => {
-  return /* @__PURE__ */ jsxs2(AbsoluteFill, {
-    style: container,
-    id: "remotion-comp-loading",
-    children: [
-      /* @__PURE__ */ jsx21("style", {
-        type: "text/css",
-        children: `
-				@keyframes anim {
-					from {
-						opacity: 0
-					}
-					to {
-						opacity: 1
-					}
-				}
-				#remotion-comp-loading {
-					animation: anim 2s;
-					animation-fill-mode: forwards;
-				}
-			`
-      }),
-      /* @__PURE__ */ jsx21("svg", {
-        width: ICON_SIZE,
-        height: ICON_SIZE,
-        viewBox: "-100 -100 400 400",
-        style: rotate,
-        children: /* @__PURE__ */ jsx21("path", {
-          fill: "#555",
-          stroke: "#555",
-          strokeWidth: "100",
-          strokeLinejoin: "round",
-          d: "M 2 172 a 196 100 0 0 0 195 5 A 196 240 0 0 0 100 2.259 A 196 240 0 0 0 2 172 z"
-        })
-      }),
-      /* @__PURE__ */ jsxs2("p", {
-        style: label,
-        children: [
-          "Resolving ",
-          "<Suspense>",
-          "..."
-        ]
-      })
-    ]
-  });
-};
-
-// src/portal-node.ts
-var _portalNode = null;
-var portalNode = () => {
-  if (!_portalNode) {
-    if (typeof document === "undefined") {
-      throw new Error("Tried to call an API that only works in the browser from outside the browser");
-    }
-    _portalNode = document.createElement("div");
-    _portalNode.style.position = "absolute";
-    _portalNode.style.top = "0px";
-    _portalNode.style.left = "0px";
-    _portalNode.style.right = "0px";
-    _portalNode.style.bottom = "0px";
-    _portalNode.style.width = "100%";
-    _portalNode.style.height = "100%";
-    _portalNode.style.display = "flex";
-    _portalNode.style.flexDirection = "column";
-    const containerNode = document.createElement("div");
-    containerNode.style.position = "fixed";
-    containerNode.style.top = -999999 + "px";
-    containerNode.appendChild(_portalNode);
-    document.body.appendChild(containerNode);
-  }
-  return _portalNode;
-};
-
-// src/use-lazy-component.ts
-import React20, { useMemo as useMemo25, useRef as useRef16 } from "react";
-var useLazyComponent = ({
-  compProps,
-  componentName,
-  noSuspense
-}) => {
-  const componentRef = useRef16(null);
-  if ("component" in compProps) {
-    componentRef.current = compProps.component;
-  }
-  const lazy = useMemo25(() => {
-    if ("component" in compProps) {
-      if (typeof document === "undefined" || noSuspense) {
-        return compProps.component;
-      }
-      if (typeof compProps.component === "undefined") {
-        throw new Error(`A value of \`undefined\` was passed to the \`component\` prop. Check the value you are passing to the <${componentName}/> component.`);
-      }
-      const Wrapper = (props2) => {
-        const Comp = componentRef.current;
-        return React20.createElement(Comp, props2);
-      };
-      return Wrapper;
-    }
-    if ("lazyComponent" in compProps && typeof compProps.lazyComponent !== "undefined") {
-      if (typeof compProps.lazyComponent === "undefined") {
-        throw new Error(`A value of \`undefined\` was passed to the \`lazyComponent\` prop. Check the value you are passing to the <${componentName}/> component.`);
-      }
-      return React20.lazy(compProps.lazyComponent);
+    if (current.duration) {
+      currentOnDurationCallback.current?.(current.src, current.duration);
+      return;
     }
-    throw new Error("You must pass either 'component' or 'lazyComponent'");
-  }, [compProps.lazyComponent]);
-  return lazy;
-};
-
-// src/validation/validate-composition-id.ts
-var getRegex2 = () => /^([a-zA-Z0-9-\u4E00-\u9FFF])+$/g;
-var isCompositionIdValid = (id) => id.match(getRegex2());
-var validateCompositionId = (id) => {
-  if (!isCompositionIdValid(id)) {
-    throw new Error(`Composition id can only contain a-z, A-Z, 0-9, CJK characters and -. You passed ${id}`);
-  }
-};
-var invalidCompositionErrorMessage = `Composition ID must match ${String(getRegex2())}`;
-
-// src/validation/validate-default-props.ts
-var validateDefaultAndInputProps = (defaultProps, name, compositionId) => {
-  if (!defaultProps) {
-    return;
-  }
-  if (typeof defaultProps !== "object") {
-    throw new Error(`"${name}" must be an object, but you passed a value of type ${typeof defaultProps}`);
-  }
-  if (Array.isArray(defaultProps)) {
-    throw new Error(`"${name}" must be an object, an array was passed ${compositionId ? `for composition "${compositionId}"` : ""}`);
+    const onLoadedMetadata = () => {
+      currentOnDurationCallback.current?.(current.src, current.duration);
+    };
+    current.addEventListener("loadedmetadata", onLoadedMetadata);
+    return () => {
+      current.removeEventListener("loadedmetadata", onLoadedMetadata);
+    };
+  }, [audioRef, src]);
+  if (initialShouldPreMountAudioElements) {
+    return null;
   }
+  return /* @__PURE__ */ jsx20("audio", {
+    ref: audioRef,
+    preload: "metadata",
+    crossOrigin: crossOriginValue,
+    ...propsToPass
+  });
 };
+var AudioForPreview = forwardRef4(AudioForDevelopmentForwardRefFunction);
 
-// src/Composition.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
-var Fallback = () => {
-  const { continueRender: continueRender2, delayRender: delayRender2 } = useDelayRender();
-  useEffect13(() => {
-    const fallback = delayRender2("Waiting for Root component to unsuspend");
-    return () => continueRender2(fallback);
-  }, [continueRender2, delayRender2]);
-  return null;
-};
-var InnerComposition = ({
-  width,
-  height,
-  fps,
-  durationInFrames,
-  id,
-  defaultProps,
-  schema,
-  ...compProps
-}) => {
-  const compManager = useContext28(CompositionSetters);
-  const { registerComposition, unregisterComposition } = compManager;
-  const video = useVideo();
-  const lazy = useLazyComponent({
-    compProps,
-    componentName: "Composition",
-    noSuspense: false
+// src/audio/AudioForRendering.tsx
+import {
+  forwardRef as forwardRef5,
+  useContext as useContext27,
+  useEffect as useEffect13,
+  useImperativeHandle as useImperativeHandle5,
+  useLayoutEffect as useLayoutEffect8,
+  useMemo as useMemo25,
+  useRef as useRef16
+} from "react";
+import { jsx as jsx21 } from "react/jsx-runtime";
+var AudioForRenderingRefForwardingFunction = (props, ref) => {
+  const audioRef = useRef16(null);
+  const {
+    volume: volumeProp,
+    playbackRate,
+    allowAmplificationDuringRender,
+    onDuration,
+    toneFrequency,
+    _remotionInternalNeedsDurationCalculation,
+    _remotionInternalNativeLoopPassed,
+    acceptableTimeShiftInSeconds,
+    name,
+    onNativeError,
+    delayRenderRetries,
+    delayRenderTimeoutInMilliseconds,
+    loopVolumeCurveBehavior,
+    pauseWhenBuffering,
+    audioStreamIndex,
+    ...nativeProps
+  } = props;
+  const absoluteFrame = useTimelinePosition();
+  const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
+  const frame = useCurrentFrame();
+  const sequenceContext = useContext27(SequenceContext);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext27(RenderAssetManager);
+  const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
+  const id = useMemo25(() => `audio-${random(props.src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}`, [
+    props.src,
+    sequenceContext?.relativeFrom,
+    sequenceContext?.cumulatedFrom,
+    sequenceContext?.durationInFrames
+  ]);
+  const volume = evaluateVolume({
+    volume: volumeProp,
+    frame: volumePropFrame,
+    mediaVolume: 1
   });
-  const nonce = useNonce();
-  const isPlayer = useIsPlayer();
-  const environment = useRemotionEnvironment();
-  const canUseComposition = useContext28(CanUseRemotionHooks);
-  if (typeof window !== "undefined") {
-    window.remotion_seenCompositionIds = Array.from(new Set([...window.remotion_seenCompositionIds ?? [], id]));
-  }
-  if (canUseComposition) {
-    if (isPlayer) {
-      throw new Error("<Composition> was mounted inside the `component` that was passed to the <Player>. See https://remotion.dev/docs/wrong-composition-mount for help.");
-    }
-    throw new Error("<Composition> mounted inside another composition. See https://remotion.dev/docs/wrong-composition-mount for help.");
-  }
-  const { folderName, parentName } = useContext28(FolderContext);
+  warnAboutTooHighVolume(volume);
+  useImperativeHandle5(ref, () => {
+    return audioRef.current;
+  }, []);
   useEffect13(() => {
-    if (!id) {
-      throw new Error("No id for composition passed.");
+    if (!props.src) {
+      throw new Error("No src passed");
     }
-    validateCompositionId(id);
-    validateDefaultAndInputProps(defaultProps, "defaultProps", id);
-    registerComposition({
-      durationInFrames: durationInFrames ?? undefined,
-      fps: fps ?? undefined,
-      height: height ?? undefined,
-      width: width ?? undefined,
+    if (!window.remotion_audioEnabled) {
+      return;
+    }
+    if (props.muted) {
+      return;
+    }
+    if (volume <= 0) {
+      return;
+    }
+    registerRenderAsset({
+      type: "audio",
+      src: getAbsoluteSrc(props.src),
       id,
-      folderName,
-      component: lazy,
-      defaultProps: serializeThenDeserializeInStudio(defaultProps ?? {}),
-      nonce: nonce.get(),
-      parentFolderName: parentName,
-      schema: schema ?? null,
-      calculateMetadata: compProps.calculateMetadata ?? null
+      frame: absoluteFrame,
+      volume,
+      mediaFrame: frame,
+      playbackRate: props.playbackRate ?? 1,
+      toneFrequency: toneFrequency ?? 1,
+      audioStartFrame: Math.max(0, -(sequenceContext?.relativeFrom ?? 0)),
+      audioStreamIndex: audioStreamIndex ?? 0
+    });
+    return () => unregisterRenderAsset(id);
+  }, [
+    props.muted,
+    props.src,
+    registerRenderAsset,
+    absoluteFrame,
+    id,
+    unregisterRenderAsset,
+    volume,
+    volumePropFrame,
+    frame,
+    playbackRate,
+    props.playbackRate,
+    toneFrequency,
+    sequenceContext?.relativeFrom,
+    audioStreamIndex
+  ]);
+  const { src } = props;
+  const needsToRenderAudioTag = ref || _remotionInternalNeedsDurationCalculation;
+  useLayoutEffect8(() => {
+    if (window.process?.env?.NODE_ENV === "test") {
+      return;
+    }
+    if (!needsToRenderAudioTag) {
+      return;
+    }
+    const newHandle = delayRender2("Loading <Html5Audio> duration with src=" + src, {
+      retries: delayRenderRetries ?? undefined,
+      timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
     });
+    const { current } = audioRef;
+    const didLoad = () => {
+      if (current?.duration) {
+        onDuration(current.src, current.duration);
+      }
+      continueRender2(newHandle);
+    };
+    if (current?.duration) {
+      onDuration(current.src, current.duration);
+      continueRender2(newHandle);
+    } else {
+      current?.addEventListener("loadedmetadata", didLoad, { once: true });
+    }
     return () => {
-      unregisterComposition(id);
+      current?.removeEventListener("loadedmetadata", didLoad);
+      continueRender2(newHandle);
     };
   }, [
-    durationInFrames,
-    fps,
-    height,
-    lazy,
-    id,
-    folderName,
-    defaultProps,
-    width,
-    nonce,
-    parentName,
-    schema,
-    compProps.calculateMetadata,
-    registerComposition,
-    unregisterComposition
+    src,
+    onDuration,
+    needsToRenderAudioTag,
+    delayRenderRetries,
+    delayRenderTimeoutInMilliseconds,
+    continueRender2,
+    delayRender2
   ]);
-  const resolved = useResolvedVideoConfig(id);
-  if (environment.isStudio && video && video.component === lazy && video.id === id) {
-    const Comp = lazy;
-    if (resolved === null || resolved.type !== "success" && resolved.type !== "success-and-refreshing") {
-      return null;
+  if (!needsToRenderAudioTag) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx21("audio", {
+    ref: audioRef,
+    ...nativeProps,
+    onError: onNativeError
+  });
+};
+var AudioForRendering = forwardRef5(AudioForRenderingRefForwardingFunction);
+
+// src/audio/Audio.tsx
+import { jsx as jsx22 } from "react/jsx-runtime";
+var AudioRefForwardingFunction = (props, ref) => {
+  const audioContext = useContext28(SharedAudioContext);
+  const {
+    startFrom,
+    endAt,
+    trimBefore,
+    trimAfter,
+    name,
+    stack,
+    pauseWhenBuffering,
+    showInTimeline,
+    onError: onRemotionError,
+    ...otherProps
+  } = props;
+  const { loop, ...propsOtherThanLoop } = props;
+  const { fps } = useVideoConfig();
+  const environment = useRemotionEnvironment();
+  if (environment.isClientSideRendering) {
+    throw new Error("<Html5Audio> is not supported in @remotion/web-renderer. Use <Audio> from @remotion/media instead. See https://remotion.dev/docs/client-side-rendering/limitations");
+  }
+  const { durations, setDurations } = useContext28(DurationsContext);
+  if (typeof props.src !== "string") {
+    throw new TypeError(`The \`<Html5Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
+  }
+  const preloadedSrc = usePreload(props.src);
+  const onError = useCallback11((e) => {
+    console.log(e.currentTarget.error);
+    const errMessage = `Could not play audio with src ${preloadedSrc}: ${e.currentTarget.error}. See https://remotion.dev/docs/media-playback-error for help.`;
+    if (loop) {
+      if (onRemotionError) {
+        onRemotionError(new Error(errMessage));
+        return;
+      }
+      cancelRender(new Error(errMessage));
+    } else {
+      onRemotionError?.(new Error(errMessage));
+      console.warn(errMessage);
     }
-    return createPortal(/* @__PURE__ */ jsx22(CanUseRemotionHooksProvider, {
-      children: /* @__PURE__ */ jsx22(Suspense, {
-        fallback: /* @__PURE__ */ jsx22(Loading, {}),
-        children: /* @__PURE__ */ jsx22(Comp, {
-          ...resolved.result.props ?? {}
-        })
+  }, [loop, onRemotionError, preloadedSrc]);
+  const onDuration = useCallback11((src, durationInSeconds) => {
+    setDurations({ type: "got-duration", durationInSeconds, src });
+  }, [setDurations]);
+  const durationFetched = durations[getAbsoluteSrc(preloadedSrc)] ?? durations[getAbsoluteSrc(props.src)];
+  validateMediaTrimProps({ startFrom, endAt, trimBefore, trimAfter });
+  const { trimBeforeValue, trimAfterValue } = resolveTrimProps({
+    startFrom,
+    endAt,
+    trimBefore,
+    trimAfter
+  });
+  if (loop && durationFetched !== undefined) {
+    if (!Number.isFinite(durationFetched)) {
+      return /* @__PURE__ */ jsx22(Html5Audio, {
+        ...propsOtherThanLoop,
+        ref,
+        _remotionInternalNativeLoopPassed: true
+      });
+    }
+    const duration = durationFetched * fps;
+    return /* @__PURE__ */ jsx22(Loop, {
+      layout: "none",
+      durationInFrames: calculateMediaDuration({
+        trimAfter: trimAfterValue,
+        mediaDurationInFrames: duration,
+        playbackRate: props.playbackRate ?? 1,
+        trimBefore: trimBeforeValue
+      }),
+      children: /* @__PURE__ */ jsx22(Html5Audio, {
+        ...propsOtherThanLoop,
+        ref,
+        _remotionInternalNativeLoopPassed: true
       })
-    }), portalNode());
+    });
   }
-  if (environment.isRendering && video && video.component === lazy && video.id === id) {
-    const Comp = lazy;
-    if (resolved === null || resolved.type !== "success" && resolved.type !== "success-and-refreshing") {
-      return null;
-    }
-    return createPortal(/* @__PURE__ */ jsx22(CanUseRemotionHooksProvider, {
-      children: /* @__PURE__ */ jsx22(Suspense, {
-        fallback: /* @__PURE__ */ jsx22(Fallback, {}),
-        children: /* @__PURE__ */ jsx22(Comp, {
-          ...resolved.result.props ?? {}
-        })
+  if (typeof trimBeforeValue !== "undefined" || typeof trimAfterValue !== "undefined") {
+    return /* @__PURE__ */ jsx22(Sequence, {
+      layout: "none",
+      from: 0 - (trimBeforeValue ?? 0),
+      showInTimeline: false,
+      durationInFrames: trimAfterValue,
+      name,
+      children: /* @__PURE__ */ jsx22(Html5Audio, {
+        _remotionInternalNeedsDurationCalculation: Boolean(loop),
+        pauseWhenBuffering: pauseWhenBuffering ?? false,
+        ...otherProps,
+        ref
       })
-    }), portalNode());
+    });
   }
-  return null;
-};
-var Composition = (props2) => {
-  const { onlyRenderComposition } = useContext28(CompositionSetters);
-  if (onlyRenderComposition && onlyRenderComposition !== props2.id) {
-    return null;
+  validateMediaProps({ playbackRate: props.playbackRate, volume: props.volume }, "Html5Audio");
+  if (environment.isRendering) {
+    return /* @__PURE__ */ jsx22(AudioForRendering, {
+      onDuration,
+      ...props,
+      ref,
+      onNativeError: onError,
+      _remotionInternalNeedsDurationCalculation: Boolean(loop)
+    });
   }
-  return /* @__PURE__ */ jsx22(InnerComposition, {
-    ...props2
+  return /* @__PURE__ */ jsx22(AudioForPreview, {
+    _remotionInternalNativeLoopPassed: props._remotionInternalNativeLoopPassed ?? false,
+    _remotionInternalStack: stack ?? null,
+    shouldPreMountAudioTags: audioContext !== null && audioContext.numberOfAudioTags > 0,
+    ...props,
+    ref,
+    onNativeError: onError,
+    onDuration,
+    pauseWhenBuffering: pauseWhenBuffering ?? false,
+    _remotionInternalNeedsDurationCalculation: Boolean(loop),
+    showInTimeline: showInTimeline ?? true
   });
 };
+var Html5Audio = forwardRef6(AudioRefForwardingFunction);
+addSequenceStackTraces(Html5Audio);
+var Audio = Html5Audio;
 // src/bezier.ts
 var NEWTON_ITERATIONS = 4;
 var NEWTON_MIN_SLOPE = 0.001;
@@ -5553,59 +5555,254 @@ var getStaticFiles = () => {
     warnPlayerOnce();
     return [];
   }
-  return window.remotion_staticFiles;
+  return window.remotion_staticFiles;
+};
+// src/IFrame.tsx
+import { forwardRef as forwardRef7, useCallback as useCallback12, useState as useState14 } from "react";
+import { jsx as jsx23 } from "react/jsx-runtime";
+var IFrameRefForwarding = ({
+  onLoad,
+  onError,
+  delayRenderRetries,
+  delayRenderTimeoutInMilliseconds,
+  ...props2
+}, ref) => {
+  const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
+  const [handle] = useState14(() => delayRender2(`Loading <IFrame> with source ${props2.src}`, {
+    retries: delayRenderRetries ?? undefined,
+    timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
+  }));
+  const didLoad = useCallback12((e) => {
+    continueRender2(handle);
+    onLoad?.(e);
+  }, [handle, onLoad, continueRender2]);
+  const didGetError = useCallback12((e) => {
+    continueRender2(handle);
+    if (onError) {
+      onError(e);
+    } else {
+      console.error("Error loading iframe:", e, "Handle the event using the onError() prop to make this message disappear.");
+    }
+  }, [handle, onError, continueRender2]);
+  return /* @__PURE__ */ jsx23("iframe", {
+    referrerPolicy: "strict-origin-when-cross-origin",
+    ...props2,
+    ref,
+    onError: didGetError,
+    onLoad: didLoad
+  });
+};
+var IFrame = forwardRef7(IFrameRefForwarding);
+// src/Img.tsx
+import {
+  useCallback as useCallback13,
+  useContext as useContext30,
+  useImperativeHandle as useImperativeHandle6,
+  useLayoutEffect as useLayoutEffect9,
+  useRef as useRef17,
+  useState as useState16
+} from "react";
+
+// src/wrap-in-schema.ts
+import React23, { forwardRef as forwardRef8, useMemo as useMemo27 } from "react";
+
+// src/use-schema.ts
+import { useContext as useContext29, useMemo as useMemo26, useState as useState15 } from "react";
+
+// src/get-effective-visual-mode-value.ts
+var getEffectiveVisualModeValue = ({
+  codeValue,
+  runtimeValue,
+  dragOverrideValue,
+  defaultValue,
+  shouldResortToDefaultValueIfUndefined = false
+}) => {
+  if (dragOverrideValue !== undefined) {
+    return dragOverrideValue;
+  }
+  if (!codeValue) {
+    return runtimeValue;
+  }
+  if (!codeValue.canUpdate) {
+    return runtimeValue;
+  }
+  if (codeValue.codeValue === undefined && shouldResortToDefaultValueIfUndefined) {
+    return defaultValue;
+  }
+  return codeValue.codeValue;
+};
+
+// src/use-schema.ts
+var useSchema = (schema, currentValue) => {
+  const env = useRemotionEnvironment();
+  const earlyReturn = useMemo26(() => {
+    if (!env.isStudio || env.isReadOnlyStudio) {
+      return {
+        controls: undefined,
+        values: currentValue ?? {}
+      };
+    }
+    return;
+  }, [env.isStudio, env.isReadOnlyStudio, currentValue]);
+  if (earlyReturn) {
+    return earlyReturn;
+  }
+  const [overrideId] = useState15(() => String(Math.random()));
+  const {
+    visualModeEnabled,
+    dragOverrides: overrides,
+    codeValues
+  } = useContext29(VisualModeOverridesContext);
+  const controls = useMemo26(() => {
+    if (!visualModeEnabled) {
+      return;
+    }
+    if (schema === null || currentValue === null) {
+      return;
+    }
+    return {
+      schema,
+      currentValue,
+      overrideId
+    };
+  }, [schema, currentValue, overrideId, visualModeEnabled]);
+  return useMemo26(() => {
+    if (controls === undefined || currentValue === null || schema === null || !visualModeEnabled) {
+      return {
+        controls: undefined,
+        values: currentValue ?? {}
+      };
+    }
+    const overrideValues = overrides[overrideId] ?? {};
+    const propStatus = codeValues[overrideId];
+    const currentValueKeys = Object.keys(currentValue);
+    const keysToUpdate = [...new Set(currentValueKeys)];
+    const merged = {};
+    for (const key of keysToUpdate) {
+      const codeValueStatus = propStatus?.[key] ?? null;
+      merged[key] = getEffectiveVisualModeValue({
+        codeValue: codeValueStatus,
+        runtimeValue: currentValue[key],
+        dragOverrideValue: overrideValues[key],
+        defaultValue: schema[key]?.default,
+        shouldResortToDefaultValueIfUndefined: false
+      });
+    }
+    return {
+      controls,
+      values: merged
+    };
+  }, [
+    controls,
+    currentValue,
+    overrideId,
+    overrides,
+    codeValues,
+    schema,
+    visualModeEnabled
+  ]);
+};
+
+// src/wrap-in-schema.ts
+var getNestedValue = (obj, key) => {
+  const parts = key.split(".");
+  let current = obj;
+  for (const part of parts) {
+    if (current === null || current === undefined || typeof current !== "object")
+      return;
+    current = current[part];
+  }
+  return current;
+};
+var mergeValues = (props2, values, schemaKeys) => {
+  const merged = { ...props2 };
+  for (const key of schemaKeys) {
+    const value = values[key];
+    const parts = key.split(".");
+    if (parts.length === 1) {
+      merged[key] = value;
+      continue;
+    }
+    let current = merged;
+    for (let i = 0;i < parts.length - 1; i++) {
+      const part = parts[i];
+      if (typeof current[part] === "object" && current[part] !== null) {
+        current[part] = { ...current[part] };
+      } else {
+        current[part] = {};
+      }
+      current = current[part];
+    }
+    current[parts[parts.length - 1]] = value;
+  }
+  return merged;
 };
-// src/IFrame.tsx
-import { forwardRef as forwardRef7, useCallback as useCallback12, useState as useState14 } from "react";
-import { jsx as jsx23 } from "react/jsx-runtime";
-var IFrameRefForwarding = ({
-  onLoad,
-  onError,
-  delayRenderRetries,
-  delayRenderTimeoutInMilliseconds,
-  ...props2
-}, ref) => {
-  const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const [handle] = useState14(() => delayRender2(`Loading <IFrame> with source ${props2.src}`, {
-    retries: delayRenderRetries ?? undefined,
-    timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
-  }));
-  const didLoad = useCallback12((e) => {
-    continueRender2(handle);
-    onLoad?.(e);
-  }, [handle, onLoad, continueRender2]);
-  const didGetError = useCallback12((e) => {
-    continueRender2(handle);
-    if (onError) {
-      onError(e);
-    } else {
-      console.error("Error loading iframe:", e, "Handle the event using the onError() prop to make this message disappear.");
+var wrapInSchema = (Component, schema) => {
+  const schemaKeys = Object.keys(schema);
+  const Wrapped = forwardRef8((props2, ref) => {
+    const env = useRemotionEnvironment();
+    if (!env.isStudio || env.isReadOnlyStudio || env.isRendering || !process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED) {
+      return React23.createElement(Component, {
+        ...props2,
+        controls: null,
+        ref
+      });
     }
-  }, [handle, onError, continueRender2]);
-  return /* @__PURE__ */ jsx23("iframe", {
-    referrerPolicy: "strict-origin-when-cross-origin",
-    ...props2,
-    ref,
-    onError: didGetError,
-    onLoad: didLoad
+    const schemaInput = useMemo27(() => {
+      const input = {};
+      for (const key of schemaKeys) {
+        input[key] = getNestedValue(props2, key);
+      }
+      return input;
+    }, schemaKeys.map((key) => getNestedValue(props2, key)));
+    const { controls, values } = useSchema(schema, schemaInput);
+    const mergedProps = mergeValues(props2, values, schemaKeys);
+    return React23.createElement(Component, {
+      ...mergedProps,
+      controls,
+      ref
+    });
   });
+  Wrapped.displayName = `wrapInSchema(${Component.displayName || Component.name || "Component"})`;
+  return Wrapped;
 };
-var IFrame = forwardRef7(IFrameRefForwarding);
+
 // src/Img.tsx
-import {
-  forwardRef as forwardRef8,
-  useCallback as useCallback13,
-  useContext as useContext29,
-  useImperativeHandle as useImperativeHandle6,
-  useLayoutEffect as useLayoutEffect9,
-  useRef as useRef17,
-  useState as useState15
-} from "react";
 import { jsx as jsx24 } from "react/jsx-runtime";
 function exponentialBackoff(errorCount) {
   return 1000 * 2 ** (errorCount - 1);
 }
-var ImgRefForwarding = ({
+var imgSchema = {
+  "style.translate": {
+    type: "translate",
+    step: 1,
+    default: "0px 0px",
+    description: "Position"
+  },
+  "style.scale": {
+    type: "number",
+    min: 0.05,
+    max: 100,
+    step: 0.01,
+    default: 1,
+    description: "Scale"
+  },
+  "style.rotate": {
+    type: "rotation",
+    step: 1,
+    default: "0deg",
+    description: "Rotation"
+  },
+  "style.opacity": {
+    type: "number",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    default: 1,
+    description: "Opacity"
+  }
+};
+var ImgInner = ({
   onError,
   maxRetries = 2,
   src,
@@ -5617,13 +5814,15 @@ var ImgRefForwarding = ({
   showInTimeline,
   name,
   stack,
+  ref,
+  controls,
   ...props2
-}, ref) => {
+}) => {
   const imageRef = useRef17(null);
   const errors = useRef17({});
   const { delayPlayback } = useBufferState();
-  const sequenceContext = useContext29(SequenceContext);
-  const [timelineId] = useState15(() => String(Math.random()));
+  const sequenceContext = useContext30(SequenceContext);
+  const [timelineId] = useState16(() => String(Math.random()));
   if (!src) {
     throw new Error('No "src" prop was passed to <Img>.');
   }
@@ -5642,7 +5841,8 @@ var ImgRefForwarding = ({
     showInTimeline: showInTimeline ?? true,
     premountDisplay: sequenceContext?.premountDisplay ?? null,
     postmountDisplay: sequenceContext?.postmountDisplay ?? null,
-    loopDisplay: undefined
+    loopDisplay: undefined,
+    controls: controls ?? null
   });
   const actualSrc = usePreload(src);
   const retryIn = useCallback13((timeout) => {
@@ -5765,22 +5965,22 @@ var ImgRefForwarding = ({
     decoding: "sync"
   });
 };
-var Img = forwardRef8(ImgRefForwarding);
+var Img = wrapInSchema(ImgInner, imgSchema);
 addSequenceStackTraces(Img);
 // src/internals.ts
 import { createRef as createRef3 } from "react";
 
 // src/CompositionManager.tsx
-import React24 from "react";
-var compositionsRef = React24.createRef();
+import React25 from "react";
+var compositionsRef = React25.createRef();
 
 // src/CompositionManagerProvider.tsx
 import {
   useCallback as useCallback14,
   useImperativeHandle as useImperativeHandle7,
-  useMemo as useMemo26,
+  useMemo as useMemo28,
   useRef as useRef18,
-  useState as useState16
+  useState as useState17
 } from "react";
 import { jsx as jsx25 } from "react/jsx-runtime";
 var CompositionManagerProvider = ({
@@ -5790,9 +5990,9 @@ var CompositionManagerProvider = ({
   initialCompositions,
   initialCanvasContent
 }) => {
-  const [folders, setFolders] = useState16([]);
-  const [canvasContent, setCanvasContent] = useState16(initialCanvasContent);
-  const [compositions, setCompositions] = useState16(initialCompositions);
+  const [folders, setFolders] = useState17([]);
+  const [canvasContent, setCanvasContent] = useState17(initialCanvasContent);
+  const [compositions, setCompositions] = useState17(initialCompositions);
   const currentcompositionsRef = useRef18(compositions);
   const updateCompositions = useCallback14((updateComps) => {
     setCompositions((comps) => {
@@ -5836,7 +6036,7 @@ var CompositionManagerProvider = ({
       getCompositions: () => currentcompositionsRef.current
     };
   }, []);
-  const compositionManagerSetters = useMemo26(() => {
+  const compositionManagerSetters = useMemo28(() => {
     return {
       registerComposition,
       unregisterComposition,
@@ -5852,7 +6052,7 @@ var CompositionManagerProvider = ({
     unregisterFolder,
     onlyRenderComposition
   ]);
-  const compositionManagerContextValue = useMemo26(() => {
+  const compositionManagerContextValue = useMemo28(() => {
     return {
       compositions,
       folders,
@@ -5929,29 +6129,6 @@ var makeDefaultPreviewCSS = (scope, backgroundColor) => {
   `;
 };
 
-// src/get-effective-visual-mode-value.ts
-var getEffectiveVisualModeValue = ({
-  codeValue,
-  runtimeValue,
-  dragOverrideValue,
-  defaultValue,
-  shouldResortToDefaultValueIfUndefined = false
-}) => {
-  if (dragOverrideValue !== undefined) {
-    return dragOverrideValue;
-  }
-  if (!codeValue) {
-    return runtimeValue;
-  }
-  if (!codeValue.canUpdate) {
-    return runtimeValue;
-  }
-  if (codeValue.codeValue === undefined && shouldResortToDefaultValueIfUndefined) {
-    return defaultValue;
-  }
-  return codeValue.codeValue;
-};
-
 // src/get-preview-dom-element.ts
 var REMOTION_STUDIO_CONTAINER_ELEMENT = "__remotion-studio-container";
 var getPreviewDomElement = () => {
@@ -5959,8 +6136,8 @@ var getPreviewDomElement = () => {
 };
 
 // src/max-video-cache-size.ts
-import React25 from "react";
-var MaxMediaCacheSizeContext = React25.createContext(null);
+import React26 from "react";
+var MaxMediaCacheSizeContext = React26.createContext(null);
 
 // src/register-root.ts
 var Root = null;
@@ -5994,14 +6171,14 @@ var waitForRoot = (fn) => {
 };
 
 // src/RemotionRoot.tsx
-import { useMemo as useMemo28 } from "react";
+import { useMemo as useMemo30 } from "react";
 
 // src/use-media-enabled.tsx
-import { createContext as createContext20, useContext as useContext30, useMemo as useMemo27 } from "react";
+import { createContext as createContext20, useContext as useContext31, useMemo as useMemo29 } from "react";
 import { jsx as jsx26 } from "react/jsx-runtime";
 var MediaEnabledContext = createContext20(null);
 var useVideoEnabled = () => {
-  const context = useContext30(MediaEnabledContext);
+  const context = useContext31(MediaEnabledContext);
   if (!context) {
     return window.remotion_videoEnabled;
   }
@@ -6011,7 +6188,7 @@ var useVideoEnabled = () => {
   return context.videoEnabled;
 };
 var useAudioEnabled = () => {
-  const context = useContext30(MediaEnabledContext);
+  const context = useContext31(MediaEnabledContext);
   if (!context) {
     return window.remotion_audioEnabled;
   }
@@ -6025,7 +6202,7 @@ var MediaEnabledProvider = ({
   videoEnabled,
   audioEnabled
 }) => {
-  const value = useMemo27(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
+  const value = useMemo29(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
   return /* @__PURE__ */ jsx26(MediaEnabledContext.Provider, {
     value,
     children
@@ -6044,13 +6221,13 @@ var RemotionRootContexts = ({
   frameState,
   visualModeEnabled
 }) => {
-  const nonceContext = useMemo28(() => {
+  const nonceContext = useMemo30(() => {
     let counter = 0;
     return {
       getNonce: () => counter++
     };
   }, []);
-  const logging = useMemo28(() => {
+  const logging = useMemo30(() => {
     return { logLevel, mountTime: Date.now() };
   }, [logLevel]);
   return /* @__PURE__ */ jsx27(LogLevelContext.Provider, {
@@ -6257,8 +6434,8 @@ var resolveVideoConfigOrCatch = (params) => {
 };
 
 // src/sequence-stack-traces.ts
-import React27 from "react";
-var SequenceStackTracesUpdateContext = React27.createContext(() => {});
+import React28 from "react";
+var SequenceStackTracesUpdateContext = React28.createContext(() => {});
 
 // src/setup-env-variables.ts
 var getEnvVariables = () => {
@@ -6288,8 +6465,8 @@ var setupEnvVariables = () => {
 };
 
 // src/use-current-scale.ts
-import React28, { createContext as createContext21 } from "react";
-var CurrentScaleContext = React28.createContext(null);
+import React29, { createContext as createContext21 } from "react";
+var CurrentScaleContext = React29.createContext(null);
 var PreviewSizeContext = createContext21({
   setSize: () => {
     return;
@@ -6314,8 +6491,8 @@ var calculateScale = ({
   return Number(previewSize);
 };
 var useCurrentScale = (options) => {
-  const hasContext = React28.useContext(CurrentScaleContext);
-  const zoomContext = React28.useContext(PreviewSizeContext);
+  const hasContext = React29.useContext(CurrentScaleContext);
+  const zoomContext = React29.useContext(PreviewSizeContext);
   const config = useUnsafeVideoConfig();
   const env = useRemotionEnvironment();
   if (hasContext === null || config === null || zoomContext === null) {
@@ -6344,78 +6521,6 @@ var useCurrentScale = (options) => {
   });
 };
 
-// src/use-schema.ts
-import { useContext as useContext31, useMemo as useMemo29, useState as useState17 } from "react";
-var useSchema = (schema, currentValue) => {
-  const env = useRemotionEnvironment();
-  const earlyReturn = useMemo29(() => {
-    if (!env.isStudio || env.isReadOnlyStudio) {
-      return {
-        controls: undefined,
-        values: currentValue ?? {}
-      };
-    }
-    return;
-  }, [env.isStudio, env.isReadOnlyStudio, currentValue]);
-  if (earlyReturn) {
-    return earlyReturn;
-  }
-  const [overrideId] = useState17(() => String(Math.random()));
-  const {
-    visualModeEnabled,
-    dragOverrides: overrides,
-    codeValues
-  } = useContext31(VisualModeOverridesContext);
-  const controls = useMemo29(() => {
-    if (!visualModeEnabled) {
-      return;
-    }
-    if (schema === null || currentValue === null) {
-      return;
-    }
-    return {
-      schema,
-      currentValue,
-      overrideId
-    };
-  }, [schema, currentValue, overrideId, visualModeEnabled]);
-  return useMemo29(() => {
-    if (controls === undefined || currentValue === null || schema === null || !visualModeEnabled) {
-      return {
-        controls: undefined,
-        values: currentValue ?? {}
-      };
-    }
-    const overrideValues = overrides[overrideId] ?? {};
-    const propStatus = codeValues[overrideId];
-    const currentValueKeys = Object.keys(currentValue);
-    const keysToUpdate = [...new Set(currentValueKeys)];
-    const merged = {};
-    for (const key of keysToUpdate) {
-      const codeValueStatus = propStatus?.[key] ?? null;
-      merged[key] = getEffectiveVisualModeValue({
-        codeValue: codeValueStatus,
-        runtimeValue: currentValue[key],
-        dragOverrideValue: overrideValues[key],
-        defaultValue: schema[key]?.default,
-        shouldResortToDefaultValueIfUndefined: false
-      });
-    }
-    return {
-      controls,
-      values: merged
-    };
-  }, [
-    controls,
-    currentValue,
-    overrideId,
-    overrides,
-    codeValues,
-    schema,
-    visualModeEnabled
-  ]);
-};
-
 // src/use-sequence-control-override.ts
 import { useContext as useContext32 } from "react";
 var useSequenceControlOverride = (key) => {
@@ -6436,7 +6541,7 @@ import {
   useContext as useContext33,
   useEffect as useEffect14,
   useLayoutEffect as useLayoutEffect10,
-  useMemo as useMemo30,
+  useMemo as useMemo31,
   useState as useState18
 } from "react";
 
@@ -6481,7 +6586,7 @@ var OffthreadVideoForRendering = ({
   if (!src) {
     throw new TypeError("No `src` was passed to <OffthreadVideo>.");
   }
-  const id = useMemo30(() => `offthreadvideo-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo31(() => `offthreadvideo-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -6536,14 +6641,14 @@ var OffthreadVideoForRendering = ({
     sequenceContext?.relativeFrom,
     audioStreamIndex
   ]);
-  const currentTime = useMemo30(() => {
+  const currentTime = useMemo31(() => {
     return getExpectedMediaFrameUncorrected({
       frame,
       playbackRate: playbackRate || 1,
       startFrom: -mediaStartsAt
     }) / videoConfig.fps;
   }, [frame, mediaStartsAt, playbackRate, videoConfig.fps]);
-  const actualSrc = useMemo30(() => {
+  const actualSrc = useMemo31(() => {
     return getOffthreadVideoSource({
       src,
       currentTime,
@@ -6631,7 +6736,7 @@ var OffthreadVideoForRendering = ({
       cancelRender("Failed to load image with src " + imageSrc);
     }
   }, [imageSrc, onError]);
-  const className = useMemo30(() => {
+  const className = useMemo31(() => {
     return [OBJECTFIT_CONTAIN_CLASS_NAME, props2.className].filter(truthy).join(" ");
   }, [props2.className]);
   const onImageFrame = useCallback15((img) => {
@@ -6655,12 +6760,12 @@ var OffthreadVideoForRendering = ({
 };
 
 // src/video/VideoForPreview.tsx
-import React30, {
+import React31, {
   forwardRef as forwardRef9,
   useContext as useContext34,
   useEffect as useEffect16,
   useImperativeHandle as useImperativeHandle8,
-  useMemo as useMemo31,
+  useMemo as useMemo32,
   useRef as useRef19,
   useState as useState19
 } from "react";
@@ -6702,7 +6807,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     throw new Error("SharedAudioContext not found");
   }
   const videoRef = useRef19(null);
-  const sharedSource = useMemo31(() => {
+  const sharedSource = useMemo32(() => {
     if (!context.audioContext) {
       return null;
     }
@@ -6711,7 +6816,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       ref: videoRef
     });
   }, [context.audioContext]);
-  const effectToUse = React30.useInsertionEffect ?? React30.useLayoutEffect;
+  const effectToUse = React31.useInsertionEffect ?? React31.useLayoutEffect;
   effectToUse(() => {
     return () => {
       requestAnimationFrame(() => {
@@ -6888,7 +6993,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.preload = "auto";
     }
   }, []);
-  const actualStyle = useMemo31(() => {
+  const actualStyle = useMemo32(() => {
     return {
       ...style,
       opacity: isSequenceHidden ? 0 : style?.opacity ?? 1
@@ -7109,71 +7214,6 @@ var watchStaticFile = (fileName, callback) => {
   return { cancel };
 };
 
-// src/wrap-in-schema.ts
-import React32, { forwardRef as forwardRef10, useMemo as useMemo32 } from "react";
-var getNestedValue = (obj, key) => {
-  const parts = key.split(".");
-  let current = obj;
-  for (const part of parts) {
-    if (current === null || current === undefined || typeof current !== "object")
-      return;
-    current = current[part];
-  }
-  return current;
-};
-var mergeValues = (props2, values, schemaKeys) => {
-  const merged = { ...props2 };
-  for (const key of schemaKeys) {
-    const value = values[key];
-    const parts = key.split(".");
-    if (parts.length === 1) {
-      merged[key] = value;
-      continue;
-    }
-    let current = merged;
-    for (let i = 0;i < parts.length - 1; i++) {
-      const part = parts[i];
-      if (typeof current[part] === "object" && current[part] !== null) {
-        current[part] = { ...current[part] };
-      } else {
-        current[part] = {};
-      }
-      current = current[part];
-    }
-    current[parts[parts.length - 1]] = value;
-  }
-  return merged;
-};
-var wrapInSchema = (Component, schema) => {
-  const schemaKeys = Object.keys(schema);
-  const Wrapped = forwardRef10((props2, ref) => {
-    const env = useRemotionEnvironment();
-    if (!env.isStudio || env.isReadOnlyStudio || env.isRendering || !process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED) {
-      return React32.createElement(Component, {
-        ...props2,
-        controls: null,
-        ref
-      });
-    }
-    const schemaInput = useMemo32(() => {
-      const input = {};
-      for (const key of schemaKeys) {
-        input[key] = getNestedValue(props2, key);
-      }
-      return input;
-    }, schemaKeys.map((key) => getNestedValue(props2, key)));
-    const { controls, values } = useSchema(schema, schemaInput);
-    const mergedProps = mergeValues(props2, values, schemaKeys);
-    return React32.createElement(Component, {
-      ...mergedProps,
-      controls,
-      ref
-    });
-  });
-  Wrapped.displayName = `wrapInSchema(${Component.displayName || Component.name || "Component"})`;
-  return Wrapped;
-};
-
 // src/wrap-remotion-context.tsx
 import React33, { useMemo as useMemo33 } from "react";
 import { jsx as jsx31 } from "react/jsx-runtime";
@@ -7886,7 +7926,7 @@ var validateFrame = ({
   }
 };
 // src/series/index.tsx
-import { Children, forwardRef as forwardRef11, useMemo as useMemo34 } from "react";
+import { Children, forwardRef as forwardRef10, useMemo as useMemo34 } from "react";
 
 // src/series/flatten-children.tsx
 import React34 from "react";
@@ -7932,7 +7972,7 @@ var SeriesSequenceRefForwardingFunction = ({ children }, _ref) => {
     children
   });
 };
-var SeriesSequence = forwardRef11(SeriesSequenceRefForwardingFunction);
+var SeriesSequence = forwardRef10(SeriesSequenceRefForwardingFunction);
 var Series = (props2) => {
   const childrenValue = useMemo34(() => {
     let startFrame = 0;
@@ -7988,19 +8028,17 @@ var Series = (props2) => {
       });
     });
   }, [props2.children]);
-  if (ENABLE_V5_BREAKING_CHANGES) {
-    return /* @__PURE__ */ jsx33(IsInsideSeriesContainer, {
-      children: /* @__PURE__ */ jsx33(Sequence, {
-        ...props2,
-        children: childrenValue
-      })
-    });
-  }
   return /* @__PURE__ */ jsx33(IsInsideSeriesContainer, {
-    children: childrenValue
+    children: /* @__PURE__ */ jsx33(Sequence, {
+      layout: "none",
+      name: "<Series>",
+      ...props2,
+      children: childrenValue
+    })
   });
 };
 Series.Sequence = SeriesSequence;
+addSequenceStackTraces(Series);
 addSequenceStackTraces(SeriesSequence);
 // src/validation/validation-spring-duration.ts
 var validateSpringDuration = (dur) => {
@@ -8343,11 +8381,11 @@ var Still = (props2) => {
   return React37.createElement(Composition, newProps);
 };
 // src/video/Video.tsx
-import { forwardRef as forwardRef13, useCallback as useCallback17, useContext as useContext36 } from "react";
+import { forwardRef as forwardRef12, useCallback as useCallback17, useContext as useContext36 } from "react";
 
 // src/video/VideoForRendering.tsx
 import {
-  forwardRef as forwardRef12,
+  forwardRef as forwardRef11,
   useContext as useContext35,
   useEffect as useEffect17,
   useImperativeHandle as useImperativeHandle9,
@@ -8692,7 +8730,7 @@ var VideoForRenderingForwardFunction = ({
     ...props2
   });
 };
-var VideoForRendering = forwardRef12(VideoForRenderingForwardFunction);
+var VideoForRendering = forwardRef11(VideoForRenderingForwardFunction);
 
 // src/video/Video.tsx
 import { jsx as jsx35 } from "react/jsx-runtime";
@@ -8800,7 +8838,7 @@ var VideoForwardingFunction = (props2, ref) => {
     onAutoPlayError: onAutoPlayError ?? undefined
   });
 };
-var Html5Video = forwardRef13(VideoForwardingFunction);
+var Html5Video = forwardRef12(VideoForwardingFunction);
 addSequenceStackTraces(Html5Video);
 var Video = Html5Video;
 // src/index.ts
@@ -8832,6 +8870,7 @@ var Config = new Proxy(proxyObj, {
 });
 Sequence.displayName = "Sequence";
 addSequenceStackTraces(Sequence);
+addSequenceStackTraces(Composition);
 export {
   watchStaticFile,
   useVideoConfig,