@remotion/promo-pages 4.0.501 → 4.0.503

package/dist/Homepage.js

@@ -915,7 +915,7 @@ import { useMemo as useMemo42 } from "react";
 
 // ../core/dist/esm/index.mjs
 import { createContext } from "react";
-import { Suspense, useCallback as useCallback7, useContext as useContext18, useEffect as useEffect3 } from "react";
+import { Suspense, useCallback as useCallback4, useContext as useContext9, useEffect as useEffect2 } from "react";
 import { createPortal } from "react-dom";
 import { createContext as createContext2 } from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
@@ -927,56 +927,56 @@ import { createContext as createContext5, useCallback, useContext, useMemo, useR
 import { jsx as jsx22 } from "react/jsx-runtime";
 import { createContext as createContext7, useContext as useContext3 } from "react";
 import { jsx as jsx3 } from "react/jsx-runtime";
-import { useCallback as useCallback6, useRef as useRef6 } from "react";
 import { forwardRef, useMemo as useMemo3 } from "react";
 import { jsx as jsx4 } from "react/jsx-runtime";
-import React4 from "react";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { createContext as createContext9, createRef, useContext as useContext5, useMemo as useMemo5 } from "react";
+import React4, { createContext as createContext8, useCallback as useCallback2, useMemo as useMemo4 } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+import { useContext as useContext4, useState } from "react";
+import React5 from "react";
+import { createContext as createContext11, useCallback as useCallback3, useContext as useContext7 } from "react";
+import { createContext as createContext10 } from "react";
+import * as React6 from "react";
+import React7, { useMemo as useMemo6, useRef as useRef2 } from "react";
+import { useContext as useContext8, useMemo as useMemo7 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+import React9 from "react";
 import {
   forwardRef as forwardRef3,
-  useCallback as useCallback5,
-  useContext as useContext17,
-  useEffect as useEffect2,
-  useMemo as useMemo14,
-  useRef as useRef5,
+  useCallback as useCallback6,
+  useContext as useContext18,
+  useEffect as useEffect3,
+  useMemo as useMemo15,
+  useRef as useRef6,
   useState as useState5
 } from "react";
-import { useContext as useContext13, useMemo as useMemo10 } from "react";
-import { createContext as createContext8 } from "react";
-import { useContext as useContext9, useMemo as useMemo8 } from "react";
+import { useContext as useContext14, useMemo as useMemo11 } from "react";
+import { createContext as createContext12 } from "react";
+import { useContext as useContext10, useMemo as useMemo9 } from "react";
 import {
-  createContext as createContext11,
+  createContext as createContext13,
   useLayoutEffect,
-  useMemo as useMemo4,
-  useRef as useRef2,
+  useMemo as useMemo8,
+  useRef as useRef3,
   useState as useState2
 } from "react";
-import { createContext as createContext10, useCallback as useCallback2, useContext as useContext6 } from "react";
-import { createContext as createContext9 } from "react";
-import * as React5 from "react";
-import { useContext as useContext5, useState } from "react";
-import React6 from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
-import { useContext as useContext8, useMemo as useMemo7 } from "react";
-import { createContext as createContext13, createRef, useContext as useContext7, useMemo as useMemo6 } from "react";
-import React8, { createContext as createContext12, useCallback as useCallback3, useMemo as useMemo5 } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
-import { useContext as useContext10 } from "react";
-import { useContext as useContext12 } from "react";
-import { useContext as useContext11, useMemo as useMemo9 } from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
-import React10, { useCallback as useCallback4, useMemo as useMemo11, useRef as useRef3, useState as useState3 } from "react";
 import { jsx as jsx8 } from "react/jsx-runtime";
-import React11, { createContext as createContext14 } from "react";
+import { useContext as useContext11 } from "react";
+import { useContext as useContext13 } from "react";
+import { useContext as useContext12, useMemo as useMemo10 } from "react";
 import { jsx as jsx9 } from "react/jsx-runtime";
-import { useContext as useContext14, useMemo as useMemo12 } from "react";
-import { createContext as createContext15 } from "react";
-import React12, { forwardRef as forwardRef2, useContext as useContext16, useMemo as useMemo13, useState as useState4 } from "react";
-import { useContext as useContext15, useRef as useRef4 } from "react";
-import { createContext as createContext16 } from "react";
+import React12, { useCallback as useCallback5, useMemo as useMemo12, useRef as useRef4, useState as useState3 } from "react";
 import { jsx as jsx10 } from "react/jsx-runtime";
+import React13, { createContext as createContext14 } from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
-import { jsx as jsx12, jsxs as jsxs2 } from "react/jsx-runtime";
-import React15, { useMemo as useMemo15, useRef as useRef7 } from "react";
+import { useContext as useContext15, useMemo as useMemo13 } from "react";
+import { createContext as createContext15 } from "react";
+import React14, { forwardRef as forwardRef2, useContext as useContext17, useMemo as useMemo14, useState as useState4 } from "react";
+import { useContext as useContext16, useRef as useRef5 } from "react";
+import { createContext as createContext16 } from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+import { useCallback as useCallback7, useRef as useRef7 } from "react";
 import { jsx as jsx13 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef4,
@@ -1581,448 +1581,306 @@ var AbsoluteFillElementRefForwarding = (props, ref) => {
   });
 };
 var AbsoluteFillElement = forwardRef(AbsoluteFillElementRefForwarding);
-var componentsToAddStacksTo = [];
-var sequenceComponent = null;
-var stacksByControls = new WeakMap;
-var REMOTION_INTERNAL_STACK_PROP = "_remotionInternalStack";
-var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
-var addSequenceStackTraces = (component) => {
-  componentsToAddStacksTo.push(component);
+var rotate = {
+  transform: `rotate(90deg)`
 };
-var setSequenceComponent = (component) => {
-  sequenceComponent = component;
+var ICON_SIZE = 40;
+var label = {
+  color: "white",
+  fontSize: 14,
+  fontFamily: "sans-serif"
 };
-var getSequenceComponent = () => sequenceComponent;
-var setStackForControls = (controls, stack) => {
-  if (stack === undefined) {
-    stacksByControls.delete(controls);
-    return;
-  }
-  stacksByControls.set(controls, stack);
+var container = {
+  justifyContent: "center",
+  alignItems: "center"
 };
-var getStackForControls = (controls) => {
-  return stacksByControls.get(controls) ?? null;
+var Loading = () => {
+  return /* @__PURE__ */ jsxs2(AbsoluteFillElement, {
+    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__ */ jsxs2("p", {
+        style: label,
+        children: [
+          "Resolving ",
+          "<Suspense>",
+          "..."
+        ]
+      })
+    ]
+  });
 };
-var getSingleChildComponent = (children) => {
-  const mountedChildren = React4.Children.toArray(children);
-  if (mountedChildren.length !== 1) {
-    return null;
+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);
   }
-  const child = mountedChildren[0];
-  if (!React4.isValidElement(child)) {
+  return _portalNode;
+};
+var getKey = () => {
+  return `remotion_inputPropsOverride` + window.location.origin;
+};
+var getInputPropsOverride = () => {
+  if (typeof localStorage === "undefined")
     return null;
-  }
-  if (typeof child.type !== "function" && typeof child.type !== "object") {
+  const override = localStorage.getItem(getKey());
+  if (!override)
     return null;
-  }
-  return child.type;
+  return JSON.parse(override);
 };
-var captionsSchema = {
-  captions: {
-    type: "remotion-captions",
-    default: undefined,
-    description: "Captions",
-    keyframable: false
+var setInputPropsOverride = (override) => {
+  if (typeof localStorage === "undefined")
+    return;
+  if (override === null) {
+    localStorage.removeItem(getKey());
+    return;
   }
+  localStorage.setItem(getKey(), JSON.stringify(override));
 };
-var transformSchema = {
-  "style.transformOrigin": {
-    type: "transform-origin",
-    step: 1,
-    default: "50% 50%",
-    description: "Transform origin"
-  },
-  "style.translate": {
-    type: "translate",
-    step: 1,
-    default: "0px 0px",
-    description: "Offset"
-  },
-  "style.scale": {
-    type: "scale",
-    max: 100,
-    step: 0.01,
-    default: 1,
-    description: "Scale",
-    defaultKeyframeOutput: "perceptual-scale"
-  },
-  "style.rotate": {
-    type: "rotation-css",
-    step: 1,
-    default: "0deg",
-    description: "Rotation"
-  },
-  "style.opacity": {
-    type: "number",
-    min: 0,
-    max: 1,
-    step: 0.01,
-    default: 1,
-    description: "Opacity",
-    hiddenFromList: false
+var didWarnSSRImport = false;
+var warnOnceSSRImport = () => {
+  if (didWarnSSRImport) {
+    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 sequenceVisualStyleSchema = transformSchema;
-var textSchema = {
-  "style.color": {
-    type: "color",
-    default: undefined,
-    description: "Color"
-  },
-  "style.fontFamily": {
-    type: "font-family",
-    default: undefined,
-    description: "Font family",
-    keyframable: false
-  },
-  "style.fontSize": {
-    type: "number",
-    default: undefined,
-    min: 0,
-    step: 1,
-    description: "Font size",
-    hiddenFromList: false
-  },
-  "style.lineHeight": {
-    type: "number",
-    default: undefined,
-    min: 0,
-    step: 0.05,
-    description: "Line height",
-    hiddenFromList: false
-  },
-  "style.fontWeight": {
-    type: "enum",
-    default: "400",
-    description: "Font weight",
-    variants: {
-      "100": {},
-      "200": {},
-      "300": {},
-      "400": {},
-      "500": {},
-      "600": {},
-      "700": {},
-      "800": {},
-      "900": {},
-      normal: {},
-      bold: {}
-    }
-  },
-  "style.fontStyle": {
-    type: "enum",
-    default: "normal",
-    description: "Font style",
-    variants: {
-      normal: {},
-      italic: {},
-      oblique: {}
-    }
-  },
-  "style.textAlign": {
-    type: "enum",
-    default: "left",
-    description: "Text align",
-    variants: {
-      left: {},
-      center: {},
-      right: {},
-      justify: {},
-      start: {},
-      end: {}
-    }
-  },
-  "style.letterSpacing": {
-    type: "number",
-    default: undefined,
-    step: 0.1,
-    description: "Letter spacing",
-    hiddenFromList: false
+var getInputProps = () => {
+  if (typeof window === "undefined") {
+    warnOnceSSRImport();
+    return {};
   }
-};
-var borderSchema = {
-  "style.borderWidth": {
-    type: "number",
-    default: undefined,
-    min: 0,
-    step: 1,
-    description: "Border width",
-    hiddenFromList: false
-  },
-  "style.borderStyle": {
-    type: "enum",
-    default: "none",
-    description: "Border style",
-    variants: {
-      none: {},
-      hidden: {},
-      solid: {},
-      dashed: {},
-      dotted: {},
-      double: {},
-      groove: {},
-      ridge: {},
-      inset: {},
-      outset: {}
-    }
-  },
-  "style.borderColor": {
-    type: "color",
-    default: undefined,
-    description: "Border color"
+  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.");
   }
-};
-var borderRadiusSchema = {
-  "style.borderRadius": {
-    type: "number",
-    default: 0,
-    min: 0,
-    step: 1,
-    description: "Border radius",
-    hiddenFromList: false,
-    keyframable: true
-  },
-  "style.borderTopLeftRadius": {
-    type: "number",
-    default: 0,
-    min: 0,
-    step: 1,
-    description: "Top left radius",
-    hiddenFromList: false
-  },
-  "style.borderTopRightRadius": {
-    type: "number",
-    default: 0,
-    min: 0,
-    step: 1,
-    description: "Top right radius",
-    hiddenFromList: false
-  },
-  "style.borderBottomRightRadius": {
-    type: "number",
-    default: 0,
-    min: 0,
-    step: 1,
-    description: "Bottom right radius",
-    hiddenFromList: false
-  },
-  "style.borderBottomLeftRadius": {
-    type: "number",
-    default: 0,
-    min: 0,
-    step: 1,
-    description: "Bottom left radius",
-    hiddenFromList: false
+  const override = getInputPropsOverride();
+  if (override) {
+    return override;
   }
-};
-var backgroundSchema = {
-  "style.backgroundColor": {
-    type: "color",
-    default: "transparent",
-    description: "Color"
+  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;
 };
-var svgStrokeSchema = {
-  stroke: {
-    type: "color",
-    default: "none",
-    description: "Stroke"
-  },
-  strokeWidth: {
-    type: "number",
-    default: 1,
-    description: "Stroke width",
-    min: 0,
-    step: 1,
-    hiddenFromList: false
+var EditorPropsContext = createContext8({
+  props: {},
+  updateProps: () => {
+    throw new Error("Not implemented");
   }
+});
+var timeValueRef = React4.createRef();
+var EditorPropsProvider = ({ children }) => {
+  const [props, setProps] = React4.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
+  });
 };
-var svgPaintSchema = {
-  fill: {
-    type: "color",
-    default: undefined,
-    description: "Fill"
-  },
-  ...svgStrokeSchema
+var RemotionEnvironmentContext = React5.createContext(null);
+var useRemotionEnvironment = () => {
+  const context = useContext4(RemotionEnvironmentContext);
+  const [env] = useState(() => getRemotionEnvironment());
+  return context ?? env;
 };
-var textContentSchema = {
-  children: {
-    type: "text-content",
-    default: "",
-    description: "Text",
-    keyframable: false
+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}`);
   }
-};
-var premountSchema = {
-  premountFor: {
-    type: "number",
-    default: 0,
-    description: "Premount For",
-    min: 0,
-    step: 1,
-    hiddenFromList: false,
-    keyframable: false
-  },
-  postmountFor: {
-    type: "number",
-    default: 0,
-    min: 0,
-    step: 1,
-    hiddenFromList: true,
-    keyframable: false
+  if (isNaN(amount)) {
+    throw new TypeError(`The "${nameOfProp}" prop ${location} must not be NaN, but is NaN.`);
   }
-};
-var sequencePremountSchema = {
-  ...premountSchema
-};
-var cropSchema = {
-  cropLeft: {
-    type: "number",
-    default: 0,
-    description: "Crop left",
-    min: 0,
-    max: 1,
-    step: 0.01,
-    hiddenFromList: false,
-    keyframable: true
-  },
-  cropRight: {
-    type: "number",
-    default: 0,
-    description: "Crop right",
-    min: 0,
-    max: 1,
-    step: 0.01,
-    hiddenFromList: false,
-    keyframable: true
-  },
-  cropTop: {
-    type: "number",
-    default: 0,
-    description: "Crop top",
-    min: 0,
-    max: 1,
-    step: 0.01,
-    hiddenFromList: false,
-    keyframable: true
-  },
-  cropBottom: {
-    type: "number",
-    default: 0,
-    description: "Crop bottom",
-    min: 0,
-    max: 1,
-    step: 0.01,
-    hiddenFromList: false,
-    keyframable: true
+  if (!Number.isFinite(amount)) {
+    throw new TypeError(`The "${nameOfProp}" prop ${location} must be finite, but is ${amount}.`);
+  }
+  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}.`);
+  }
+}
+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}.`);
+  }
+}
+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`);
+  }
+}
+var ResolveCompositionContext = createContext9(null);
+var resolveCompositionsRef = createRef();
+var needsResolution = (composition) => {
+  return Boolean(composition.calculateMetadata);
 };
-var sequenceCropSchema = cropSchema;
-var sequenceStyleSchema = {
-  ...sequenceCropSchema,
-  ...transformSchema,
-  ...backgroundSchema,
-  ...borderSchema,
-  ...borderRadiusSchema,
-  ...sequencePremountSchema
-};
-var hiddenField = {
-  type: "boolean",
-  default: false,
-  description: "Hidden"
-};
-var showInTimelineField = {
-  type: "hidden"
-};
-var sequenceNameField = {
-  type: "hidden"
-};
-var extendSchemaWithSequenceName = (schema) => {
-  return {
-    name: sequenceNameField,
-    ...schema
-  };
-};
-var durationInFramesField = {
-  type: "number",
-  default: undefined,
-  min: 1,
-  step: 1,
-  hiddenFromList: true
-};
-var fromField = {
-  type: "number",
-  default: 0,
-  step: 1,
-  hiddenFromList: true
-};
-var trimBeforeField = {
-  type: "number",
-  default: 0,
-  min: 0,
-  step: 1,
-  hiddenFromList: true
-};
-var freezeField = {
-  type: "number",
-  default: null,
-  step: 1,
-  hiddenFromList: true
-};
-var baseSchema = {
-  durationInFrames: durationInFramesField,
-  from: fromField,
-  trimBefore: trimBeforeField,
-  freeze: freezeField,
-  hidden: hiddenField,
-  name: sequenceNameField,
-  showInTimeline: showInTimelineField
-};
-var sequenceSchema = {
-  ...baseSchema,
-  layout: {
-    type: "enum",
-    default: "absolute-fill",
-    description: "Layout",
-    variants: {
-      "absolute-fill": sequenceStyleSchema,
-      none: {}
+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;
     }
-  }
-};
-var baseSchemaWithoutFrom = {
-  durationInFrames: durationInFramesField,
-  trimBefore: trimBeforeField,
-  freeze: freezeField,
-  hidden: hiddenField,
-  name: sequenceNameField,
-  showInTimeline: showInTimelineField
-};
-var sequenceSchemaWithoutFrom = {
-  ...baseSchemaWithoutFrom,
-  layout: sequenceSchema.layout
-};
-var sequenceSchemaDefaultLayoutNone = {
-  ...sequenceSchema,
-  layout: {
-    ...sequenceSchema.layout,
-    default: "none"
-  }
+    if (currentCompositionMetadata) {
+      return {
+        type: "success",
+        metadataSource: null,
+        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",
+        metadataSource: null,
+        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,
+          defaultSampleRate: null
+        }
+      };
+    }
+    if (!context) {
+      return null;
+    }
+    if (!context[composition.id]) {
+      return null;
+    }
+    return context[composition.id];
+  }, [
+    composition,
+    context,
+    currentCompositionMetadata,
+    selectedEditorProps,
+    env.isPlayer
+  ]);
 };
-var SequenceContext = createContext8(null);
-var exports_timeline_position_state = {};
-__export2(exports_timeline_position_state, {
-  useTimelineSetFrame: () => useTimelineSetFrame,
-  useTimelinePosition: () => useTimelinePosition,
-  useTimelineContext: () => useTimelineContext,
-  usePlayingState: () => usePlayingState,
-  usePlaybackRate: () => usePlaybackRate,
-  useAbsoluteTimelinePosition: () => useAbsoluteTimelinePosition,
-  persistCurrentFrame: () => persistCurrentFrame,
-  getInitialFrameState: () => getInitialFrameState,
-  getFrameForComposition: () => getFrameForComposition,
-  clampFrameToCompositionRange: () => clampFrameToCompositionRange
-});
 var getErrorStackWithMessage = (error) => {
   const stack = error.stack ?? "";
   return stack.startsWith("Error:") ? stack : `${error.message}
@@ -2138,11 +1996,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);
@@ -2151,12 +2009,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,
@@ -2189,10 +2047,10 @@ var continueRenderInternal = ({
   const handleExists = scope.remotion_delayRenderHandles.includes(handle);
   const timeoutEntry = scope.remotion_delayRenderTimeouts[handle];
   if (handleExists && environment.isRendering && timeoutEntry) {
-    const { label, startTime, timeout } = timeoutEntry;
+    const { label: label2, startTime, timeout } = timeoutEntry;
     clearTimeout(timeout);
     const message = [
-      label ? `"${label}"` : "A handle",
+      label2 ? `"${label2}"` : "A handle",
       DELAY_RENDER_CLEAR_TOKEN,
       `${Date.now() - startTime}ms`
     ].filter(truthy).join(" ");
@@ -2204,47 +2062,41 @@ var continueRenderInternal = ({
     scope.remotion_renderReady = true;
   }
 };
-var LogLevelContext = createContext9({
+var LogLevelContext = createContext10({
   logLevel: "info",
   mountTime: 0
 });
 var useLogLevel = () => {
-  const { logLevel } = React5.useContext(LogLevelContext);
+  const { logLevel } = React6.useContext(LogLevelContext);
   if (logLevel === null) {
     throw new Error("useLogLevel must be used within a LogLevelProvider");
   }
   return logLevel;
 };
 var useMountTime = () => {
-  const { mountTime } = React5.useContext(LogLevelContext);
+  const { mountTime } = React6.useContext(LogLevelContext);
   if (mountTime === null) {
     throw new Error("useMountTime must be used within a LogLevelProvider");
   }
   return mountTime;
 };
-var RemotionEnvironmentContext = React6.createContext(null);
-var useRemotionEnvironment = () => {
-  const context = useContext5(RemotionEnvironmentContext);
-  const [env] = useState(() => getRemotionEnvironment());
-  return context ?? env;
-};
-var DelayRenderContextType = createContext10(null);
+var DelayRenderContextType = createContext11(null);
 var useDelayRender = () => {
   const environment = useRemotionEnvironment();
-  const scope = useContext6(DelayRenderContextType) ?? (typeof window !== "undefined" ? window : undefined);
+  const scope = useContext7(DelayRenderContextType) ?? (typeof window !== "undefined" ? window : undefined);
   const logLevel = useLogLevel();
-  const delayRender2 = useCallback2((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 = useCallback2((handle) => {
+  const continueRender2 = useCallback3((handle) => {
     if (!scope) {
       return;
     }
@@ -2255,12 +2107,306 @@ var useDelayRender = () => {
       logLevel
     });
   }, [environment, logLevel, scope]);
-  const cancelRender2 = useCallback2((err) => {
+  const cancelRender2 = useCallback3((err) => {
     return cancelRenderInternal(scope ?? (typeof window !== "undefined" ? window : undefined), err);
   }, [scope]);
   return { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 };
 };
-var SetTimelineContext = createContext11({
+var useLazyComponent = ({
+  compProps,
+  componentName,
+  noSuspense
+}) => {
+  const componentRef = useRef2(null);
+  if ("component" in compProps) {
+    componentRef.current = compProps.component;
+  }
+  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 React7.createElement(Comp, props);
+      };
+      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 React7.lazy(compProps.lazyComponent);
+    }
+    throw new Error("You must pass either 'component' or 'lazyComponent'");
+  }, [compProps.lazyComponent]);
+  return lazy;
+};
+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 (resolved.type === "error") {
+      return null;
+    }
+    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 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())}`;
+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}"` : ""}`);
+  }
+};
+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;
+};
+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 (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 } = useContext9(FolderContext);
+  const stack = compProps._remotionInternalStack ?? null;
+  const componentFromProps = "component" in compProps ? compProps.component : null;
+  useEffect2(() => {
+    if (!id) {
+      throw new Error("No id for composition passed.");
+    }
+    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,
+      componentFromProps,
+      schema: schema ?? null,
+      calculateMetadata: compProps.calculateMetadata ?? null,
+      stack
+    });
+    return () => {
+      unregisterComposition(id);
+    };
+  }, [
+    durationInFrames,
+    fps,
+    height,
+    lazy,
+    id,
+    folderName,
+    defaultProps,
+    width,
+    nonce,
+    parentName,
+    componentFromProps,
+    schema,
+    compProps.calculateMetadata,
+    stack,
+    registerComposition,
+    unregisterComposition
+  ]);
+  const resolved = useResolvedVideoConfig(id);
+  const { setError, clearError } = useContext9(CompositionRenderErrorContext);
+  const onError = useCallback4((error2) => {
+    setError(error2);
+  }, [setError]);
+  const onClear = useCallback4(() => {
+    clearError();
+  }, [clearError]);
+  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;
+    }
+    return createPortal(/* @__PURE__ */ jsx7(CanUseRemotionHooksProvider, {
+      children: /* @__PURE__ */ jsx7(CompositionErrorBoundary, {
+        onError,
+        onClear,
+        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 createPortal(/* @__PURE__ */ jsx7(CanUseRemotionHooksProvider, {
+      children: /* @__PURE__ */ jsx7(Suspense, {
+        fallback: /* @__PURE__ */ jsx7(Fallback, {}),
+        children: /* @__PURE__ */ jsx7(Comp, {
+          ...resolved.result.props ?? {}
+        })
+      })
+    }), portalNode());
+  }
+  return null;
+};
+var Composition = (props) => {
+  const { onlyRenderComposition } = useContext9(CompositionSetters);
+  if (onlyRenderComposition && onlyRenderComposition !== props.id) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx7(InnerComposition, {
+    ...props
+  });
+};
+var componentsToAddStacksTo = [];
+var sequenceComponent = null;
+var stacksByControls = new WeakMap;
+var REMOTION_INTERNAL_STACK_PROP = "_remotionInternalStack";
+var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
+var addSequenceStackTraces = (component) => {
+  componentsToAddStacksTo.push(component);
+};
+var setSequenceComponent = (component) => {
+  sequenceComponent = component;
+};
+var getSequenceComponent = () => sequenceComponent;
+var setStackForControls = (controls, stack) => {
+  if (stack === undefined) {
+    stacksByControls.delete(controls);
+    return;
+  }
+  stacksByControls.set(controls, stack);
+};
+var getStackForControls = (controls) => {
+  return stacksByControls.get(controls) ?? null;
+};
+var getSingleChildComponent = (children) => {
+  const mountedChildren = React9.Children.toArray(children);
+  if (mountedChildren.length !== 1) {
+    return null;
+  }
+  const child = mountedChildren[0];
+  if (!React9.isValidElement(child)) {
+    return null;
+  }
+  if (typeof child.type !== "function" && typeof child.type !== "object") {
+    return null;
+  }
+  return child.type;
+};
+var VERSION = "4.0.503";
+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();
+};
+var SequenceContext = createContext12(null);
+var exports_timeline_position_state = {};
+__export2(exports_timeline_position_state, {
+  useTimelineSetFrame: () => useTimelineSetFrame,
+  useTimelinePosition: () => useTimelinePosition,
+  useTimelineContext: () => useTimelineContext,
+  usePlayingState: () => usePlayingState,
+  usePlaybackRate: () => usePlaybackRate,
+  useAbsoluteTimelinePosition: () => useAbsoluteTimelinePosition,
+  persistCurrentFrame: () => persistCurrentFrame,
+  getInitialFrameState: () => getInitialFrameState,
+  getFrameForComposition: () => getFrameForComposition,
+  clampFrameToCompositionRange: () => clampFrameToCompositionRange
+});
+var SetTimelineContext = createContext13({
   setFrame: () => {
     throw new Error("default");
   },
@@ -2268,14 +2414,14 @@ var SetTimelineContext = createContext11({
     throw new Error("default");
   }
 });
-var TimelineContext = createContext11(null);
-var PlaybackRateContext = createContext11(null);
-var AbsoluteTimeContext = createContext11(null);
+var TimelineContext = createContext13(null);
+var PlaybackRateContext = createContext13(null);
+var AbsoluteTimeContext = createContext13(null);
 var TimelineContextProvider = ({ children, frameState }) => {
   const [playing, setPlaying] = useState2(false);
-  const imperativePlaying = useRef2(false);
+  const imperativePlaying = useRef3(false);
   const [playbackRate, setPlaybackRate] = useState2(1);
-  const audioAndVideoTags = useRef2([]);
+  const audioAndVideoTags = useRef3([]);
   const [_frame, setFrame] = useState2(() => getInitialFrameState());
   const frame = frameState ?? _frame;
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
@@ -2305,7 +2451,7 @@ var TimelineContextProvider = ({ children, frameState }) => {
       window.remotion_isPlayer = false;
     }, [continueRender2, delayRender2]);
   }
-  const timelineContextValue = useMemo4(() => {
+  const timelineContextValue = useMemo8(() => {
     return {
       frame,
       playing,
@@ -2313,25 +2459,25 @@ var TimelineContextProvider = ({ children, frameState }) => {
       audioAndVideoTags
     };
   }, [frame, playing]);
-  const playbackRateContextValue = useMemo4(() => {
+  const playbackRateContextValue = useMemo8(() => {
     return {
       playbackRate,
       setPlaybackRate
     };
   }, [playbackRate]);
-  const setTimelineContextValue = useMemo4(() => {
+  const setTimelineContextValue = useMemo8(() => {
     return {
       setFrame,
       setPlaying
     };
   }, []);
-  return /* @__PURE__ */ jsx5(AbsoluteTimeContext.Provider, {
+  return /* @__PURE__ */ jsx8(AbsoluteTimeContext.Provider, {
     value: timelineContextValue,
-    children: /* @__PURE__ */ jsx5(PlaybackRateContext.Provider, {
+    children: /* @__PURE__ */ jsx8(PlaybackRateContext.Provider, {
       value: playbackRateContextValue,
-      children: /* @__PURE__ */ jsx5(TimelineContext.Provider, {
+      children: /* @__PURE__ */ jsx8(TimelineContext.Provider, {
         value: timelineContextValue,
-        children: /* @__PURE__ */ jsx5(SetTimelineContext.Provider, {
+        children: /* @__PURE__ */ jsx8(SetTimelineContext.Provider, {
           value: setTimelineContextValue,
           children
         })
@@ -2339,245 +2485,6 @@ var TimelineContextProvider = ({ children, frameState }) => {
     })
   });
 };
-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));
-};
-var didWarnSSRImport = false;
-var warnOnceSSRImport = () => {
-  if (didWarnSSRImport) {
-    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.");
-  }
-  const param = window.remotion_inputProps;
-  if (!param) {
-    return {};
-  }
-  const parsed = deserializeJSONWithSpecialTypes(param);
-  return parsed;
-};
-var EditorPropsContext = createContext12({
-  props: {},
-  updateProps: () => {
-    throw new Error("Not implemented");
-  }
-});
-var timeValueRef = React8.createRef();
-var EditorPropsProvider = ({ children }) => {
-  const [props, setProps] = React8.useState({});
-  const updateProps = useCallback3(({
-    defaultProps,
-    id,
-    newProps
-  }) => {
-    setProps((prev) => {
-      return {
-        ...prev,
-        [id]: typeof newProps === "function" ? newProps(prev[id] ?? defaultProps) : newProps
-      };
-    });
-  }, []);
-  const ctx = useMemo5(() => {
-    return { props, updateProps };
-  }, [props, updateProps]);
-  return /* @__PURE__ */ jsx6(EditorPropsContext.Provider, {
-    value: ctx,
-    children
-  });
-};
-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.`);
-  }
-  if (!Number.isFinite(amount)) {
-    throw new TypeError(`The "${nameOfProp}" prop ${location} must be finite, but is ${amount}.`);
-  }
-  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}.`);
-  }
-}
-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}.`);
-  }
-}
-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`);
-  }
-}
-var ResolveCompositionContext = createContext13(null);
-var resolveCompositionsRef = createRef();
-var needsResolution = (composition) => {
-  return Boolean(composition.calculateMetadata);
-};
-var useResolvedVideoConfig = (preferredCompositionId) => {
-  const context = useContext7(ResolveCompositionContext);
-  const { props: allEditorProps } = useContext7(EditorPropsContext);
-  const { compositions, canvasContent, currentCompositionMetadata } = useContext7(CompositionManager);
-  const currentComposition = canvasContent?.type === "composition" ? canvasContent.compositionId : null;
-  const compositionId = preferredCompositionId ?? currentComposition;
-  const composition = compositions.find((c) => c.id === compositionId);
-  const selectedEditorProps = useMemo6(() => {
-    return composition ? allEditorProps[composition.id] ?? {} : {};
-  }, [allEditorProps, composition]);
-  const env = useRemotionEnvironment();
-  return useMemo6(() => {
-    if (!composition) {
-      return null;
-    }
-    if (currentCompositionMetadata) {
-      return {
-        type: "success",
-        metadataSource: null,
-        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",
-        metadataSource: null,
-        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,
-          defaultSampleRate: null
-        }
-      };
-    }
-    if (!context) {
-      return null;
-    }
-    if (!context[composition.id]) {
-      return null;
-    }
-    return context[composition.id];
-  }, [
-    composition,
-    context,
-    currentCompositionMetadata,
-    selectedEditorProps,
-    env.isPlayer
-  ]);
-};
-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 (resolved.type === "error") {
-      return null;
-    }
-    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 makeKey = () => {
   return `remotion.time-all`;
 };
@@ -2613,14 +2520,14 @@ var useTimelinePositionFromContext = (state) => {
   return clampFrameToCompositionRange(unclamped, videoConfig.durationInFrames);
 };
 var useTimelineContext = () => {
-  const state = useContext9(TimelineContext);
+  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 usePlaybackRate = () => {
-  const state = useContext9(PlaybackRateContext);
+  const state = useContext10(PlaybackRateContext);
   if (state === null) {
     throw new Error("PlaybackRateContext is not available. This hook must be used inside a <Player> or the Remotion Studio.");
   }
@@ -2631,23 +2538,23 @@ var useTimelinePosition = () => {
   return useTimelinePositionFromContext(state);
 };
 var useAbsoluteTimelinePosition = () => {
-  const state = useContext9(AbsoluteTimeContext);
+  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 } = useContext9(SetTimelineContext);
+  const { setFrame } = useContext10(SetTimelineContext);
   return setFrame;
 };
 var usePlayingState = () => {
   const { playing, imperativePlaying } = useTimelineContext();
-  const { setPlaying } = useContext9(SetTimelineContext);
-  return useMemo8(() => [playing, setPlaying, imperativePlaying], [imperativePlaying, playing, setPlaying]);
+  const { setPlaying } = useContext10(SetTimelineContext);
+  return useMemo9(() => [playing, setPlaying, imperativePlaying], [imperativePlaying, playing, setPlaying]);
 };
 var useCurrentFrame = () => {
-  const canUseRemotionHooks = useContext10(CanUseRemotionHooks);
+  const canUseRemotionHooks = useContext11(CanUseRemotionHooks);
   const env = useRemotionEnvironment();
   if (!canUseRemotionHooks) {
     if (env.isPlayer) {
@@ -2656,17 +2563,17 @@ 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 = useContext10(SequenceContext);
+  const context = useContext11(SequenceContext);
   const contextOffset = context ? context.cumulatedFrom + context.relativeFrom : 0;
   return frame - contextOffset;
 };
 var useUnsafeVideoConfig = () => {
-  const context = useContext11(SequenceContext);
+  const context = useContext12(SequenceContext);
   const ctxWidth = context?.width ?? null;
   const ctxHeight = context?.height ?? null;
   const ctxDuration = context?.durationInFrames ?? null;
   const video = useVideo();
-  return useMemo9(() => {
+  return useMemo10(() => {
     if (!video) {
       return null;
     }
@@ -2704,7 +2611,7 @@ var useUnsafeVideoConfig = () => {
 };
 var useVideoConfig = () => {
   const videoConfig = useUnsafeVideoConfig();
-  const context = useContext12(CanUseRemotionHooks);
+  const context = useContext13(CanUseRemotionHooks);
   const isPlayer = useIsPlayer();
   if (!videoConfig) {
     if (typeof window !== "undefined" && window.remotion_isPlayer || isPlayer) {
@@ -2740,7 +2647,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 = useMemo10(() => {
+  const isActive = useMemo11(() => {
     if (typeof active === "boolean") {
       return active;
     }
@@ -2749,9 +2656,9 @@ var Freeze = ({
     }
   }, [active, frame]);
   const timelineContext = useTimelineContext();
-  const sequenceContext = useContext13(SequenceContext);
+  const sequenceContext = useContext14(SequenceContext);
   const relativeFrom = sequenceContext?.relativeFrom ?? 0;
-  const timelineValue = useMemo10(() => {
+  const timelineValue = useMemo11(() => {
     if (!isActive) {
       return timelineContext;
     }
@@ -2766,7 +2673,7 @@ var Freeze = ({
       }
     };
   }, [isActive, timelineContext, videoConfig.id, frameToFreeze, relativeFrom]);
-  const newSequenceContext = useMemo10(() => {
+  const newSequenceContext = useMemo11(() => {
     if (!sequenceContext) {
       return null;
     }
@@ -2778,14 +2685,406 @@ var Freeze = ({
       cumulatedFrom: 0
     };
   }, [sequenceContext, isActive]);
-  return /* @__PURE__ */ jsx7(TimelineContext.Provider, {
+  return /* @__PURE__ */ jsx9(TimelineContext.Provider, {
     value: timelineValue,
-    children: /* @__PURE__ */ jsx7(SequenceContext.Provider, {
+    children: /* @__PURE__ */ jsx9(SequenceContext.Provider, {
       value: newSequenceContext,
       children
     })
   });
 };
+var captionsSchema = {
+  captions: {
+    type: "remotion-captions",
+    default: undefined,
+    description: "Captions",
+    keyframable: false
+  }
+};
+var transformSchema = {
+  "style.transformOrigin": {
+    type: "transform-origin",
+    step: 1,
+    default: "50% 50%",
+    description: "Transform origin"
+  },
+  "style.translate": {
+    type: "translate",
+    step: 1,
+    default: "0px 0px",
+    description: "Offset"
+  },
+  "style.scale": {
+    type: "scale",
+    max: 100,
+    step: 0.01,
+    default: 1,
+    description: "Scale",
+    defaultKeyframeOutput: "perceptual-scale"
+  },
+  "style.rotate": {
+    type: "rotation-css",
+    step: 1,
+    default: "0deg",
+    description: "Rotation"
+  },
+  "style.opacity": {
+    type: "number",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    default: 1,
+    description: "Opacity",
+    hiddenFromList: false
+  }
+};
+var sequenceVisualStyleSchema = transformSchema;
+var textSchema = {
+  "style.color": {
+    type: "color",
+    default: undefined,
+    description: "Color"
+  },
+  "style.fontFamily": {
+    type: "font-family",
+    default: undefined,
+    description: "Font family",
+    keyframable: false
+  },
+  "style.fontSize": {
+    type: "number",
+    default: undefined,
+    min: 0,
+    step: 1,
+    description: "Font size",
+    hiddenFromList: false
+  },
+  "style.lineHeight": {
+    type: "number",
+    default: undefined,
+    min: 0,
+    step: 0.05,
+    description: "Line height",
+    hiddenFromList: false
+  },
+  "style.fontWeight": {
+    type: "enum",
+    default: "400",
+    description: "Font weight",
+    variants: {
+      "100": {},
+      "200": {},
+      "300": {},
+      "400": {},
+      "500": {},
+      "600": {},
+      "700": {},
+      "800": {},
+      "900": {},
+      normal: {},
+      bold: {}
+    }
+  },
+  "style.fontStyle": {
+    type: "enum",
+    default: "normal",
+    description: "Font style",
+    variants: {
+      normal: {},
+      italic: {},
+      oblique: {}
+    }
+  },
+  "style.textAlign": {
+    type: "enum",
+    default: "left",
+    description: "Text align",
+    variants: {
+      left: {},
+      center: {},
+      right: {},
+      justify: {},
+      start: {},
+      end: {}
+    }
+  },
+  "style.letterSpacing": {
+    type: "number",
+    default: undefined,
+    step: 0.1,
+    description: "Letter spacing",
+    hiddenFromList: false
+  }
+};
+var borderSchema = {
+  "style.borderWidth": {
+    type: "number",
+    default: undefined,
+    min: 0,
+    step: 1,
+    description: "Border width",
+    hiddenFromList: false
+  },
+  "style.borderStyle": {
+    type: "enum",
+    default: "none",
+    description: "Border style",
+    variants: {
+      none: {},
+      hidden: {},
+      solid: {},
+      dashed: {},
+      dotted: {},
+      double: {},
+      groove: {},
+      ridge: {},
+      inset: {},
+      outset: {}
+    }
+  },
+  "style.borderColor": {
+    type: "color",
+    default: undefined,
+    description: "Border color"
+  }
+};
+var borderRadiusSchema = {
+  "style.borderRadius": {
+    type: "number",
+    default: 0,
+    min: 0,
+    step: 1,
+    description: "Border radius",
+    hiddenFromList: false,
+    keyframable: true
+  },
+  "style.borderTopLeftRadius": {
+    type: "number",
+    default: 0,
+    min: 0,
+    step: 1,
+    description: "Top left radius",
+    hiddenFromList: false
+  },
+  "style.borderTopRightRadius": {
+    type: "number",
+    default: 0,
+    min: 0,
+    step: 1,
+    description: "Top right radius",
+    hiddenFromList: false
+  },
+  "style.borderBottomRightRadius": {
+    type: "number",
+    default: 0,
+    min: 0,
+    step: 1,
+    description: "Bottom right radius",
+    hiddenFromList: false
+  },
+  "style.borderBottomLeftRadius": {
+    type: "number",
+    default: 0,
+    min: 0,
+    step: 1,
+    description: "Bottom left radius",
+    hiddenFromList: false
+  }
+};
+var backgroundSchema = {
+  "style.backgroundColor": {
+    type: "color",
+    default: "transparent",
+    description: "Color"
+  }
+};
+var svgStrokeSchema = {
+  stroke: {
+    type: "color",
+    default: "none",
+    description: "Stroke"
+  },
+  strokeWidth: {
+    type: "number",
+    default: 1,
+    description: "Stroke width",
+    min: 0,
+    step: 1,
+    hiddenFromList: false
+  }
+};
+var svgPaintSchema = {
+  fill: {
+    type: "color",
+    default: undefined,
+    description: "Fill"
+  },
+  ...svgStrokeSchema
+};
+var textContentSchema = {
+  children: {
+    type: "text-content",
+    default: "",
+    description: "Text",
+    keyframable: false
+  }
+};
+var premountSchema = {
+  premountFor: {
+    type: "number",
+    default: 0,
+    description: "Premount For",
+    min: 0,
+    step: 1,
+    hiddenFromList: false,
+    keyframable: false
+  },
+  postmountFor: {
+    type: "number",
+    default: 0,
+    min: 0,
+    step: 1,
+    hiddenFromList: true,
+    keyframable: false
+  }
+};
+var sequencePremountSchema = {
+  ...premountSchema
+};
+var cropSchema = {
+  cropLeft: {
+    type: "number",
+    default: 0,
+    description: "Crop left",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    hiddenFromList: false,
+    keyframable: true
+  },
+  cropRight: {
+    type: "number",
+    default: 0,
+    description: "Crop right",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    hiddenFromList: false,
+    keyframable: true
+  },
+  cropTop: {
+    type: "number",
+    default: 0,
+    description: "Crop top",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    hiddenFromList: false,
+    keyframable: true
+  },
+  cropBottom: {
+    type: "number",
+    default: 0,
+    description: "Crop bottom",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    hiddenFromList: false,
+    keyframable: true
+  }
+};
+var sequenceCropSchema = cropSchema;
+var sequenceStyleSchema = {
+  ...sequenceCropSchema,
+  ...transformSchema,
+  ...backgroundSchema,
+  ...borderSchema,
+  ...borderRadiusSchema,
+  ...sequencePremountSchema
+};
+var hiddenField = {
+  type: "boolean",
+  default: false,
+  description: "Hidden"
+};
+var showInTimelineField = {
+  type: "hidden"
+};
+var sequenceNameField = {
+  type: "hidden"
+};
+var extendSchemaWithSequenceName = (schema) => {
+  return {
+    name: sequenceNameField,
+    ...schema
+  };
+};
+var durationInFramesField = {
+  type: "number",
+  default: undefined,
+  min: 1,
+  step: 1,
+  hiddenFromList: true
+};
+var fromField = {
+  type: "number",
+  default: 0,
+  step: 1,
+  hiddenFromList: true
+};
+var trimBeforeField = {
+  type: "number",
+  default: 0,
+  min: 0,
+  step: 1,
+  hiddenFromList: true
+};
+var freezeField = {
+  type: "number",
+  default: null,
+  step: 1,
+  hiddenFromList: true
+};
+var baseSchema = {
+  durationInFrames: durationInFramesField,
+  from: fromField,
+  trimBefore: trimBeforeField,
+  freeze: freezeField,
+  hidden: hiddenField,
+  name: sequenceNameField,
+  showInTimeline: showInTimelineField
+};
+var sequenceSchema = {
+  ...baseSchema,
+  layout: {
+    type: "enum",
+    default: "absolute-fill",
+    description: "Layout",
+    variants: {
+      "absolute-fill": sequenceStyleSchema,
+      none: {}
+    }
+  }
+};
+var baseSchemaWithoutFrom = {
+  durationInFrames: durationInFramesField,
+  trimBefore: trimBeforeField,
+  freeze: freezeField,
+  hidden: hiddenField,
+  name: sequenceNameField,
+  showInTimeline: showInTimelineField
+};
+var sequenceSchemaWithoutFrom = {
+  ...baseSchemaWithoutFrom,
+  layout: sequenceSchema.layout
+};
+var sequenceSchemaDefaultLayoutNone = {
+  ...sequenceSchema,
+  layout: {
+    ...sequenceSchema.layout,
+    default: "none"
+  }
+};
 var clampCrop = (value) => {
   return Math.min(1, Math.max(0, value ?? 0));
 };
@@ -2842,7 +3141,7 @@ var validateSequenceCrop = (crop, componentName = "<Sequence />") => {
     }
   }
 };
-var SequenceManager = React10.createContext({
+var SequenceManager = React12.createContext({
   registerSequence: () => {
     throw new Error("SequenceManagerContext not initialized");
   },
@@ -2851,19 +3150,19 @@ var SequenceManager = React10.createContext({
   },
   sequences: []
 });
-var SequenceManagerRefContext = React10.createContext({
+var SequenceManagerRefContext = React12.createContext({
   current: []
 });
 var makeSequencePropsSubscriptionKey = (key) => {
   return `${key.absolutePath}\x00${key.nodePath.join(".")}\x00${key.sequenceKeys.join(".")}\x00${key.effectKeys.map((keys) => keys.join(".")).join(".")}`;
 };
-var VisualModePropStatusesContext = React10.createContext({
+var VisualModePropStatusesContext = React12.createContext({
   propStatuses: {}
 });
-var VisualModePropStatusesRefContext = React10.createContext({
+var VisualModePropStatusesRefContext = React12.createContext({
   current: {}
 });
-var VisualModeDragOverridesContext = React10.createContext({
+var VisualModeDragOverridesContext = React12.createContext({
   getDragOverrides: () => {
     throw new Error("VisualModeDragOverridesContext not initialized");
   },
@@ -2871,7 +3170,7 @@ var VisualModeDragOverridesContext = React10.createContext({
     throw new Error("VisualModeDragOverridesContext not initialized");
   }
 });
-var VisualModeSettersContext = React10.createContext({
+var VisualModeSettersContext = React12.createContext({
   setDragOverrides: () => {
     throw new Error("VisualModeSettersContext not initialized");
   },
@@ -2891,16 +3190,16 @@ var VisualModeSettersContext = React10.createContext({
 var effectDragOverridesKey = (nodePath, effectIndex) => `${makeSequencePropsSubscriptionKey(nodePath)}.effects.${effectIndex}`;
 var SequenceManagerProvider = ({ children }) => {
   const [sequences, setSequences] = useState3([]);
-  const sequencesRef = useRef3(sequences);
+  const sequencesRef = useRef4(sequences);
   sequencesRef.current = sequences;
   const [dragOverrides, setControlOverrides] = useState3({});
-  const controlOverridesRef = useRef3(dragOverrides);
+  const controlOverridesRef = useRef4(dragOverrides);
   controlOverridesRef.current = dragOverrides;
   const [effectDragOverridesState, setEffectDragOverridesState] = useState3({});
   const [propStatuses, setPropStatusesMapState] = useState3({});
-  const propStatusesRef = useRef3(propStatuses);
+  const propStatusesRef = useRef4(propStatuses);
   propStatusesRef.current = propStatuses;
-  const setDragOverrides = useCallback4((nodePath, key, value) => {
+  const setDragOverrides = useCallback5((nodePath, key, value) => {
     setControlOverrides((prev) => ({
       ...prev,
       [makeSequencePropsSubscriptionKey(nodePath)]: {
@@ -2909,7 +3208,7 @@ var SequenceManagerProvider = ({ children }) => {
       }
     }));
   }, []);
-  const clearDragOverrides = useCallback4((nodePath) => {
+  const clearDragOverrides = useCallback5((nodePath) => {
     setControlOverrides((prev) => {
       const key = makeSequencePropsSubscriptionKey(nodePath);
       if (!prev[key]) {
@@ -2920,7 +3219,7 @@ var SequenceManagerProvider = ({ children }) => {
       return next;
     });
   }, []);
-  const setEffectDragOverrides = useCallback4((nodePath, effectIndex, key, value) => {
+  const setEffectDragOverrides = useCallback5((nodePath, effectIndex, key, value) => {
     setEffectDragOverridesState((prev) => {
       const mapKey = effectDragOverridesKey(nodePath, effectIndex);
       return {
@@ -2932,7 +3231,7 @@ var SequenceManagerProvider = ({ children }) => {
       };
     });
   }, []);
-  const clearEffectDragOverrides = useCallback4((nodePath, effectIndex) => {
+  const clearEffectDragOverrides = useCallback5((nodePath, effectIndex) => {
     setEffectDragOverridesState((prev) => {
       const mapKey = effectDragOverridesKey(nodePath, effectIndex);
       if (!prev[mapKey]) {
@@ -2943,7 +3242,7 @@ var SequenceManagerProvider = ({ children }) => {
       return next;
     });
   }, []);
-  const setPropStatuses = useCallback4((nodePath, values) => {
+  const setPropStatuses = useCallback5((nodePath, values) => {
     setPropStatusesMapState((prev) => {
       const key = makeSequencePropsSubscriptionKey(nodePath);
       const prevKey = prev[key];
@@ -2954,39 +3253,39 @@ var SequenceManagerProvider = ({ children }) => {
       return { ...prev, [key]: newKey };
     });
   }, []);
-  const registerSequence = useCallback4((seq) => {
+  const registerSequence = useCallback5((seq) => {
     setSequences((seqs) => {
       return [...seqs, seq];
     });
   }, []);
-  const unregisterSequence = useCallback4((seq) => {
+  const unregisterSequence = useCallback5((seq) => {
     setSequences((seqs) => seqs.filter((s) => s.id !== seq));
   }, []);
-  const sequenceContext = useMemo11(() => {
+  const sequenceContext = useMemo12(() => {
     return {
       registerSequence,
       sequences,
       unregisterSequence
     };
   }, [registerSequence, sequences, unregisterSequence]);
-  const getDragOverrides = useCallback4((nodePath) => {
+  const getDragOverrides = useCallback5((nodePath) => {
     return dragOverrides[makeSequencePropsSubscriptionKey(nodePath)] ?? {};
   }, [dragOverrides]);
-  const getEffectDragOverrides = useCallback4((nodePath, effectIndex) => {
+  const getEffectDragOverrides = useCallback5((nodePath, effectIndex) => {
     return effectDragOverridesState[effectDragOverridesKey(nodePath, effectIndex)] ?? {};
   }, [effectDragOverridesState]);
-  const propStatusesContext = useMemo11(() => {
+  const propStatusesContext = useMemo12(() => {
     return {
       propStatuses
     };
   }, [propStatuses]);
-  const dragOverridesContext = useMemo11(() => {
+  const dragOverridesContext = useMemo12(() => {
     return {
       getDragOverrides,
       getEffectDragOverrides
     };
   }, [getDragOverrides, getEffectDragOverrides]);
-  const settersContext = useMemo11(() => {
+  const settersContext = useMemo12(() => {
     return {
       setDragOverrides,
       clearDragOverrides,
@@ -3001,17 +3300,17 @@ var SequenceManagerProvider = ({ children }) => {
     clearEffectDragOverrides,
     setPropStatuses
   ]);
-  return /* @__PURE__ */ jsx8(SequenceManagerRefContext.Provider, {
+  return /* @__PURE__ */ jsx10(SequenceManagerRefContext.Provider, {
     value: sequencesRef,
-    children: /* @__PURE__ */ jsx8(SequenceManager.Provider, {
+    children: /* @__PURE__ */ jsx10(SequenceManager.Provider, {
       value: sequenceContext,
-      children: /* @__PURE__ */ jsx8(VisualModePropStatusesRefContext.Provider, {
+      children: /* @__PURE__ */ jsx10(VisualModePropStatusesRefContext.Provider, {
         value: propStatusesRef,
-        children: /* @__PURE__ */ jsx8(VisualModePropStatusesContext.Provider, {
+        children: /* @__PURE__ */ jsx10(VisualModePropStatusesContext.Provider, {
           value: propStatusesContext,
-          children: /* @__PURE__ */ jsx8(VisualModeDragOverridesContext.Provider, {
+          children: /* @__PURE__ */ jsx10(VisualModeDragOverridesContext.Provider, {
             value: dragOverridesContext,
-            children: /* @__PURE__ */ jsx8(VisualModeSettersContext.Provider, {
+            children: /* @__PURE__ */ jsx10(VisualModeSettersContext.Provider, {
               value: settersContext,
               children
             })
@@ -3023,19 +3322,19 @@ var SequenceManagerProvider = ({ children }) => {
 };
 var IsInsideSeriesContext = createContext14(false);
 var IsInsideSeriesContainer = ({ children }) => {
-  return /* @__PURE__ */ jsx9(IsInsideSeriesContext.Provider, {
+  return /* @__PURE__ */ jsx11(IsInsideSeriesContext.Provider, {
     value: true,
     children
   });
 };
 var IsNotInsideSeriesProvider = ({ children }) => {
-  return /* @__PURE__ */ jsx9(IsInsideSeriesContext.Provider, {
+  return /* @__PURE__ */ jsx11(IsInsideSeriesContext.Provider, {
     value: false,
     children
   });
 };
 var useRequireToBeInsideSeries = () => {
-  const isInsideSeries = React11.useContext(IsInsideSeriesContext);
+  const isInsideSeries = React13.useContext(IsInsideSeriesContext);
   if (!isInsideSeries) {
     throw new Error("This component must be inside a <Series /> component.");
   }
@@ -3057,7 +3356,7 @@ var usePremounting = ({
   styleWhilePostmounted,
   hideWhilePremounted
 }) => {
-  const parentPremountContext = useContext14(PremountContext);
+  const parentPremountContext = useContext15(PremountContext);
   const frame = useCurrentFrame() - parentPremountContext.premountFramesRemaining;
   const environment = useRemotionEnvironment();
   const { fps } = useVideoConfig();
@@ -3068,7 +3367,7 @@ var usePremounting = ({
   const postmountingActive = !environment.isRendering && frame > endThreshold && frame <= endThreshold + effectivePostmountFor;
   const isPremountingOrPostmounting = premountingActive || postmountingActive;
   const freezeFrame = premountingActive ? from : postmountingActive ? from + durationInFrames - 1 : 0;
-  const premountingStyle = useMemo12(() => {
+  const premountingStyle = useMemo13(() => {
     if (!isPremountingOrPostmounting) {
       return style;
     }
@@ -4875,7 +5174,7 @@ var resolvePropStatusOverrides = (propStatus, frame) => {
   return hasAny ? out : null;
 };
 var useMemoizedEffectDefinitions = (effects) => {
-  const previousRef = useRef4(null);
+  const previousRef = useRef5(null);
   const definitions = effects.map((descriptor) => descriptor.definition);
   const previous = previousRef.current;
   const isSame = previous !== null && previous.length === definitions.length && previous.every((def, i) => def === definitions[i]);
@@ -4920,11 +5219,11 @@ var useMemoizedEffects = ({
   effects,
   overrideId
 }) => {
-  const previousRef = useRef4(null);
-  const { propStatuses } = useContext15(VisualModePropStatusesContext);
-  const { getEffectDragOverrides } = useContext15(VisualModeDragOverridesContext);
+  const previousRef = useRef5(null);
+  const { propStatuses } = useContext16(VisualModePropStatusesContext);
+  const { getEffectDragOverrides } = useContext16(VisualModeDragOverridesContext);
   const frame = useCurrentFrame();
-  const { overrideIdToNodePathMappings } = useContext15(OverrideIdsToNodePathsGettersContext);
+  const { overrideIdToNodePathMappings } = useContext16(OverrideIdsToNodePathsGettersContext);
   const previous = previousRef.current;
   const nodePath = overrideId ? overrideIdToNodePathMappings[overrideId] ?? null : null;
   const resolved = effects.map((descriptor, index) => {
@@ -5267,22 +5566,22 @@ var withInteractivitySchema = ({
     const cleanProps = propsWithoutInternalStack;
     const env = useRemotionEnvironment();
     if (!env.isStudio || env.isRendering) {
-      return React12.createElement(Component, {
+      return React14.createElement(Component, {
         ...cleanProps,
         controls: null,
         ref
       });
     }
-    const { propStatuses } = useContext16(VisualModePropStatusesContext);
-    const { getDragOverrides } = useContext16(VisualModeDragOverridesContext);
-    const nodePathMapping = useContext16(OverrideIdsToNodePathsGettersContext);
+    const { propStatuses } = useContext17(VisualModePropStatusesContext);
+    const { getDragOverrides } = useContext17(VisualModeDragOverridesContext);
+    const nodePathMapping = useContext17(OverrideIdsToNodePathsGettersContext);
     const frame = useCurrentFrame();
     if (cleanProps.controls) {
       const passedControls = cleanProps.controls;
       if (getStackForControls(passedControls) === null) {
         setStackForControls(passedControls, internalStack);
       }
-      return React12.createElement(Component, {
+      return React14.createElement(Component, {
         ...cleanProps,
         ref
       });
@@ -5305,8 +5604,8 @@ var withInteractivitySchema = ({
       key,
       props: cleanProps
     }));
-    const currentRuntimeValueDotNotation = useMemo13(() => readValuesFromProps(cleanProps, flatKeys, flatSchema), runtimeValues);
-    const controls = useMemo13(() => {
+    const currentRuntimeValueDotNotation = useMemo14(() => readValuesFromProps(cleanProps, flatKeys, flatSchema), runtimeValues);
+    const controls = useMemo14(() => {
       return {
         schema: schemaWithSequenceName,
         currentRuntimeValueDotNotation,
@@ -5317,7 +5616,7 @@ var withInteractivitySchema = ({
       };
     }, [currentRuntimeValueDotNotation, overrideId]);
     setStackForControls(controls, internalStack);
-    const { merged: valuesDotNotation, propsToDelete } = useMemo13(() => {
+    const { merged: valuesDotNotation, propsToDelete } = useMemo14(() => {
       return computeEffectiveSchemaValuesDotNotation({
         schema: schemaWithSequenceName,
         currentValue: currentRuntimeValueDotNotation,
@@ -5340,7 +5639,7 @@ var withInteractivitySchema = ({
       schemaKeys: activeKeys,
       propsToDelete
     });
-    return React12.createElement(Component, {
+    return React14.createElement(Component, {
       ...mergedProps,
       controls,
       ref
@@ -5379,7 +5678,7 @@ var RegularSequenceRefForwardingFunction = ({
 }, ref) => {
   const { layout = "absolute-fill" } = other;
   const [id] = useState5(() => String(Math.random()));
-  const parentSequence = useContext17(SequenceContext);
+  const parentSequence = useContext18(SequenceContext);
   const cumulatedFrom = parentSequence ? parentSequence.cumulatedFrom + parentSequence.relativeFrom : 0;
   const nonce = useNonce();
   if (layout !== "absolute-fill" && layout !== "none") {
@@ -5441,13 +5740,13 @@ var RegularSequenceRefForwardingFunction = ({
   const absoluteFrom = (parentSequence?.absoluteFrom ?? 0) + effectiveRelativeFrom;
   const parentSequenceDuration = parentSequence ? Math.min(parentSequence.durationInFrames - effectiveRelativeFrom, durationInFrames) : durationInFrames;
   const actualDurationInFrames = Math.max(0, Math.min(videoConfig.durationInFrames - from, parentSequenceDuration));
-  const { registerSequence, unregisterSequence } = useContext17(SequenceManager);
-  const wrapperRefForOutline = useRef5(null);
+  const { registerSequence, unregisterSequence } = useContext18(SequenceManager);
+  const wrapperRefForOutline = useRef6(null);
   const refForOutline = other.layout === "none" ? passedRefForOutline ?? null : passedRefForOutline ?? wrapperRefForOutline;
-  const premounting = useMemo14(() => {
+  const premounting = useMemo15(() => {
     return parentSequence?.premounting || Boolean(other._remotionInternalIsPremounting);
   }, [other._remotionInternalIsPremounting, parentSequence?.premounting]);
-  const postmounting = useMemo14(() => {
+  const postmounting = useMemo15(() => {
     return parentSequence?.postmounting || Boolean(other._remotionInternalIsPostmounting);
   }, [other._remotionInternalIsPostmounting, parentSequence?.postmounting]);
   const currentSequenceStart = cumulatedFrom + effectiveRelativeFrom;
@@ -5455,7 +5754,7 @@ var RegularSequenceRefForwardingFunction = ({
   const parentFirstFrame = parentSequence ? parentSequenceStart - parentSequence.cumulatedNegativeFrom : 0;
   const firstFrame = Math.max(0, parentFirstFrame, currentSequenceStart);
   const cumulatedNegativeFrom = currentSequenceStart - firstFrame;
-  const contextValue = useMemo14(() => {
+  const contextValue = useMemo15(() => {
     return {
       absoluteFrom,
       cumulatedFrom,
@@ -5486,13 +5785,13 @@ var RegularSequenceRefForwardingFunction = ({
     postmountDisplay,
     cumulatedNegativeFrom
   ]);
-  const timelineClipName = useMemo14(() => {
+  const timelineClipName = useMemo15(() => {
     return name ?? "";
   }, [name]);
   const resolvedDocumentationLink = documentationLink ?? "https://www.remotion.dev/docs/sequence";
   const env = useRemotionEnvironment();
-  const isInsideSeries = useContext17(IsInsideSeriesContext);
-  const stackRef = useRef5(null);
+  const isInsideSeries = useContext18(IsInsideSeriesContext);
+  const stackRef = useRef6(null);
   stackRef.current = controls ? getStackForControls(controls) ?? stack ?? null : stack ?? null;
   const registeredFrozenFrame = typeof freeze === "number" ? freeze : null;
   const registeredTrimBefore = trimBefore === 0 ? null : trimBefore;
@@ -5500,7 +5799,7 @@ var RegularSequenceRefForwardingFunction = ({
   const startMediaFrom = isMedia && isMedia.type !== "image" ? isMedia.data.startMediaFrom + parentCumulatedNegativeFrom - cumulatedNegativeFrom : null;
   const mediaFrameAtSequenceZero = isMedia && isMedia.type !== "image" ? isMedia.data.startMediaFrom + parentCumulatedNegativeFrom : null;
   const frozenMediaFrame = isMedia && isMedia.type !== "image" && mediaFrameAtSequenceZero !== null ? registeredFrozenFrame === null ? null : mediaFrameAtSequenceZero + (loopDisplay ? registeredFrozenFrame % loopDisplay.durationInFrames : registeredFrozenFrame) * isMedia.data.playbackRate : null;
-  useEffect2(() => {
+  useEffect3(() => {
     if (!env.isStudio) {
       return;
     }
@@ -5621,7 +5920,7 @@ var RegularSequenceRefForwardingFunction = ({
   ]);
   const endThreshold = Math.ceil(cumulatedFrom + from + durationInFrames - 1);
   const content = absoluteFrame < cumulatedFrom + from ? null : absoluteFrame > endThreshold ? null : children;
-  const frozenContent = content === null || typeof freeze === "undefined" || freeze === null ? content : /* @__PURE__ */ jsx10(Freeze, {
+  const frozenContent = content === null || typeof freeze === "undefined" || freeze === null ? content : /* @__PURE__ */ jsx12(Freeze, {
     frame: freeze,
     children: content
   });
@@ -5633,7 +5932,7 @@ var RegularSequenceRefForwardingFunction = ({
     bottom: resolvedCropBottom,
     style: styleIfThere
   });
-  const sequenceRef = useCallback5((node) => {
+  const sequenceRef = useCallback6((node) => {
     wrapperRefForOutline.current = node;
     if (typeof ref === "function") {
       ref(node);
@@ -5641,7 +5940,7 @@ var RegularSequenceRefForwardingFunction = ({
       ref.current = node;
     }
   }, [ref]);
-  const defaultStyle = useMemo14(() => {
+  const defaultStyle = useMemo15(() => {
     return {
       flexDirection: undefined,
       ...width ? { width } : {},
@@ -5658,9 +5957,9 @@ var RegularSequenceRefForwardingFunction = ({
   if (hidden) {
     return null;
   }
-  return /* @__PURE__ */ jsx10(SequenceContext.Provider, {
+  return /* @__PURE__ */ jsx12(SequenceContext.Provider, {
     value: contextValue,
-    children: frozenContent === null ? null : other.layout === "none" ? frozenContent : /* @__PURE__ */ jsx10(AbsoluteFillElement, {
+    children: frozenContent === null ? null : other.layout === "none" ? frozenContent : /* @__PURE__ */ jsx12(AbsoluteFillElement, {
       ref: sequenceRef,
       style: defaultStyle,
       className: other.className,
@@ -5699,10 +5998,10 @@ var PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
     styleWhilePostmounted: styleWhilePostmounted ?? null,
     hideWhilePremounted: "opacity"
   });
-  return /* @__PURE__ */ jsx10(Freeze, {
+  return /* @__PURE__ */ jsx12(Freeze, {
     frame: freezeFrame,
     active: isPremountingOrPostmounting,
-    children: /* @__PURE__ */ jsx10(SequenceInner, {
+    children: /* @__PURE__ */ jsx12(SequenceInner, {
       ref,
       from,
       durationInFrames,
@@ -5722,14 +6021,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__ */ jsx10(PremountedPostmountedSequence, {
+      return /* @__PURE__ */ jsx12(PremountedPostmountedSequence, {
         ref,
         ...props,
         premountFor: effectivePremountFor
       });
     }
   }
-  return /* @__PURE__ */ jsx10(RegularSequence, {
+  return /* @__PURE__ */ jsx12(RegularSequence, {
     ...props,
     ref
   });
@@ -5781,19 +6080,19 @@ var AbsoluteFillInner = ({
   ...divProps
 }) => {
   const videoConfig = useUnsafeVideoConfig();
-  const refForOutline = useRef6(null);
-  const callbackRef = useCallback6((element) => {
+  const refForOutline = useRef7(null);
+  const callbackRef = useCallback7((element) => {
     refForOutline.current = element;
     setRef(ref, element);
   }, [ref]);
   if (videoConfig === null) {
-    return hidden ? null : /* @__PURE__ */ jsx11(AbsoluteFillElement, {
+    return hidden ? null : /* @__PURE__ */ jsx13(AbsoluteFillElement, {
       ref: callbackRef,
       ...divProps,
       children
     });
   }
-  return /* @__PURE__ */ jsx11(Sequence, {
+  return /* @__PURE__ */ jsx13(Sequence, {
     layout: "none",
     from: from ?? 0,
     trimBefore,
@@ -5806,7 +6105,7 @@ var AbsoluteFillInner = ({
     _remotionInternalStack: stack,
     _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/absolute-fill",
     outlineRef: refForOutline,
-    children: /* @__PURE__ */ jsx11(AbsoluteFillElement, {
+    children: /* @__PURE__ */ jsx13(AbsoluteFillElement, {
       ref: callbackRef,
       ...divProps,
       children
@@ -5821,305 +6120,6 @@ var AbsoluteFill = withInteractivitySchema({
   supportsEffects: false
 });
 addSequenceStackTraces(AbsoluteFill);
-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__ */ jsx12("style", {
-        type: "text/css",
-        children: `
-				@keyframes anim {
-					from {
-						opacity: 0
-					}
-					to {
-						opacity: 1
-					}
-				}
-				#remotion-comp-loading {
-					animation: anim 2s;
-					animation-fill-mode: forwards;
-				}
-			`
-      }),
-      /* @__PURE__ */ jsx12("svg", {
-        width: ICON_SIZE,
-        height: ICON_SIZE,
-        viewBox: "-100 -100 400 400",
-        style: rotate,
-        children: /* @__PURE__ */ jsx12("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>",
-          "..."
-        ]
-      })
-    ]
-  });
-};
-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;
-};
-var useLazyComponent = ({
-  compProps,
-  componentName,
-  noSuspense
-}) => {
-  const componentRef = useRef7(null);
-  if ("component" in compProps) {
-    componentRef.current = compProps.component;
-  }
-  const lazy = useMemo15(() => {
-    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 React15.createElement(Comp, props);
-      };
-      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 React15.lazy(compProps.lazyComponent);
-    }
-    throw new Error("You must pass either 'component' or 'lazyComponent'");
-  }, [compProps.lazyComponent]);
-  return lazy;
-};
-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())}`;
-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}"` : ""}`);
-  }
-};
-var Fallback = () => {
-  const { continueRender: continueRender2, delayRender: delayRender2 } = useDelayRender();
-  useEffect3(() => {
-    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 = useContext18(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 = useContext18(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 } = useContext18(FolderContext);
-  const stack = compProps._remotionInternalStack ?? null;
-  const componentFromProps = "component" in compProps ? compProps.component : null;
-  useEffect3(() => {
-    if (!id) {
-      throw new Error("No id for composition passed.");
-    }
-    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,
-      componentFromProps,
-      schema: schema ?? null,
-      calculateMetadata: compProps.calculateMetadata ?? null,
-      stack
-    });
-    return () => {
-      unregisterComposition(id);
-    };
-  }, [
-    durationInFrames,
-    fps,
-    height,
-    lazy,
-    id,
-    folderName,
-    defaultProps,
-    width,
-    nonce,
-    parentName,
-    componentFromProps,
-    schema,
-    compProps.calculateMetadata,
-    stack,
-    registerComposition,
-    unregisterComposition
-  ]);
-  const resolved = useResolvedVideoConfig(id);
-  const { setError, clearError } = useContext18(CompositionRenderErrorContext);
-  const onError = useCallback7((error2) => {
-    setError(error2);
-  }, [setError]);
-  const onClear = useCallback7(() => {
-    clearError();
-  }, [clearError]);
-  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;
-    }
-    return createPortal(/* @__PURE__ */ jsx13(CanUseRemotionHooksProvider, {
-      children: /* @__PURE__ */ jsx13(CompositionErrorBoundary, {
-        onError,
-        onClear,
-        children: /* @__PURE__ */ jsx13(Suspense, {
-          fallback: /* @__PURE__ */ jsx13(Loading, {}),
-          children: /* @__PURE__ */ jsx13(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 createPortal(/* @__PURE__ */ jsx13(CanUseRemotionHooksProvider, {
-      children: /* @__PURE__ */ jsx13(Suspense, {
-        fallback: /* @__PURE__ */ jsx13(Fallback, {}),
-        children: /* @__PURE__ */ jsx13(Comp, {
-          ...resolved.result.props ?? {}
-        })
-      })
-    }), portalNode());
-  }
-  return null;
-};
-var Composition = (props) => {
-  const { onlyRenderComposition } = useContext18(CompositionSetters);
-  if (onlyRenderComposition && onlyRenderComposition !== props.id) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx13(InnerComposition, {
-    ...props
-  });
-};
-var VERSION = "4.0.501";
-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();
-};
 var useCropStyle = ({
   cropLeft,
   cropRight,
@@ -14405,7 +14405,7 @@ import { useMemo as useMemo55 } from "react";
 
 // ../design/dist/esm/index.mjs
 import * as React25 from "react";
-import * as React7 from "react";
+import * as React8 from "react";
 import { Fragment as Fragment22, jsx as jsx46 } from "react/jsx-runtime";
 import React52, { useCallback as useCallback28, useRef as useRef210, useState as useState22 } from "react";
 
@@ -21442,21 +21442,21 @@ import { jsx as jsx113 } from "react/jsx-runtime";
 import { jsx as jsx123 } from "react/jsx-runtime";
 import * as React362 from "react";
 import * as ReactDOM4 from "react-dom";
-import React112 from "react";
+import React11 from "react";
 import * as React82 from "react";
 import { jsx as jsx132 } from "react/jsx-runtime";
-import * as React9 from "react";
-import * as React102 from "react";
+import * as React92 from "react";
+import * as React10 from "react";
 import { Fragment as Fragment5, jsx as jsx142 } from "react/jsx-runtime";
 import { jsx as jsx152 } from "react/jsx-runtime";
 import * as React122 from "react";
 import { jsx as jsx162 } from "react/jsx-runtime";
 import * as React16 from "react";
-import * as React13 from "react";
+import * as React132 from "react";
 import * as ReactDOM from "react-dom";
 import { jsx as jsx172 } from "react/jsx-runtime";
-import * as React14 from "react";
-import * as React152 from "react";
+import * as React142 from "react";
+import * as React15 from "react";
 import { jsx as jsx182 } from "react/jsx-runtime";
 import * as React172 from "react";
 import * as React182 from "react";
@@ -21553,7 +21553,7 @@ function composeRefs(...refs) {
   };
 }
 function useComposedRefs(...refs) {
-  return React7.useCallback(composeRefs(...refs), refs);
+  return React8.useCallback(composeRefs(...refs), refs);
 }
 var REACT_LAZY_TYPE = Symbol.for("react.lazy");
 var use = React25[" use ".trim().toString()];
@@ -22342,45 +22342,45 @@ function composeRefs2(...refs) {
   return (node) => refs.forEach((ref) => setRef22(ref, node));
 }
 function useComposedRefs2(...refs) {
-  return React9.useCallback(composeRefs2(...refs), refs);
+  return React92.useCallback(composeRefs2(...refs), refs);
 }
-var Slot2 = React102.forwardRef((props, forwardedRef) => {
+var Slot2 = React10.forwardRef((props, forwardedRef) => {
   const { children, ...slotProps } = props;
-  const childrenArray = React102.Children.toArray(children);
+  const childrenArray = React10.Children.toArray(children);
   const slottable = childrenArray.find(isSlottable2);
   if (slottable) {
     const newElement = slottable.props.children;
     const newChildren = childrenArray.map((child) => {
       if (child === slottable) {
-        if (React102.Children.count(newElement) > 1)
-          return React102.Children.only(null);
-        return React102.isValidElement(newElement) ? newElement.props.children : null;
+        if (React10.Children.count(newElement) > 1)
+          return React10.Children.only(null);
+        return React10.isValidElement(newElement) ? newElement.props.children : null;
       } else {
         return child;
       }
     });
-    return /* @__PURE__ */ jsx142(SlotClone, { ...slotProps, ref: forwardedRef, children: React102.isValidElement(newElement) ? React102.cloneElement(newElement, undefined, newChildren) : null });
+    return /* @__PURE__ */ jsx142(SlotClone, { ...slotProps, ref: forwardedRef, children: React10.isValidElement(newElement) ? React10.cloneElement(newElement, undefined, newChildren) : null });
   }
   return /* @__PURE__ */ jsx142(SlotClone, { ...slotProps, ref: forwardedRef, children });
 });
 Slot2.displayName = "Slot";
-var SlotClone = React102.forwardRef((props, forwardedRef) => {
+var SlotClone = React10.forwardRef((props, forwardedRef) => {
   const { children, ...slotProps } = props;
-  if (React102.isValidElement(children)) {
+  if (React10.isValidElement(children)) {
     const childrenRef = getElementRef2(children);
-    return React102.cloneElement(children, {
+    return React10.cloneElement(children, {
       ...mergeProps2(slotProps, children.props),
       ref: forwardedRef ? composeRefs2(forwardedRef, childrenRef) : childrenRef
     });
   }
-  return React102.Children.count(children) > 1 ? React102.Children.only(null) : null;
+  return React10.Children.count(children) > 1 ? React10.Children.only(null) : null;
 });
 SlotClone.displayName = "SlotClone";
 var Slottable2 = ({ children }) => {
   return /* @__PURE__ */ jsx142(Fragment5, { children });
 };
 function isSlottable2(child) {
-  return React102.isValidElement(child) && child.type === Slottable2;
+  return React10.isValidElement(child) && child.type === Slottable2;
 }
 function mergeProps2(slotProps, childProps) {
   const overrideProps = { ...childProps };
@@ -22424,13 +22424,13 @@ function createCollection(name) {
   const [CollectionProviderImpl, useCollectionContext] = createCollectionContext(PROVIDER_NAME, { collectionRef: { current: null }, itemMap: /* @__PURE__ */ new Map });
   const CollectionProvider = (props) => {
     const { scope, children } = props;
-    const ref = React112.useRef(null);
-    const itemMap = React112.useRef(/* @__PURE__ */ new Map).current;
+    const ref = React11.useRef(null);
+    const itemMap = React11.useRef(/* @__PURE__ */ new Map).current;
     return /* @__PURE__ */ jsx152(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
   };
   CollectionProvider.displayName = PROVIDER_NAME;
   const COLLECTION_SLOT_NAME = name + "CollectionSlot";
-  const CollectionSlot = React112.forwardRef((props, forwardedRef) => {
+  const CollectionSlot = React11.forwardRef((props, forwardedRef) => {
     const { scope, children } = props;
     const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
     const composedRefs = useComposedRefs2(forwardedRef, context.collectionRef);
@@ -22439,12 +22439,12 @@ function createCollection(name) {
   CollectionSlot.displayName = COLLECTION_SLOT_NAME;
   const ITEM_SLOT_NAME = name + "CollectionItemSlot";
   const ITEM_DATA_ATTR = "data-radix-collection-item";
-  const CollectionItemSlot = React112.forwardRef((props, forwardedRef) => {
+  const CollectionItemSlot = React11.forwardRef((props, forwardedRef) => {
     const { scope, children, ...itemData } = props;
-    const ref = React112.useRef(null);
+    const ref = React11.useRef(null);
     const composedRefs = useComposedRefs2(forwardedRef, ref);
     const context = useCollectionContext(ITEM_SLOT_NAME, scope);
-    React112.useEffect(() => {
+    React11.useEffect(() => {
       context.itemMap.set(ref, { ref, ...itemData });
       return () => void context.itemMap.delete(ref);
     });
@@ -22453,7 +22453,7 @@ function createCollection(name) {
   CollectionItemSlot.displayName = ITEM_SLOT_NAME;
   function useCollection(scope) {
     const context = useCollectionContext(name + "CollectionConsumer", scope);
-    const getItems = React112.useCallback(() => {
+    const getItems = React11.useCallback(() => {
       const collectionNode = context.collectionRef.current;
       if (!collectionNode)
         return [];
@@ -22494,7 +22494,7 @@ var NODES = [
   "ul"
 ];
 var Primitive = NODES.reduce((primitive, node) => {
-  const Node2 = React13.forwardRef((props, forwardedRef) => {
+  const Node2 = React132.forwardRef((props, forwardedRef) => {
     const { asChild, ...primitiveProps } = props;
     const Comp = asChild ? Slot2 : node;
     if (typeof window !== "undefined") {
@@ -22510,15 +22510,15 @@ function dispatchDiscreteCustomEvent(target, event) {
     ReactDOM.flushSync(() => target.dispatchEvent(event));
 }
 function useCallbackRef(callback) {
-  const callbackRef = React14.useRef(callback);
-  React14.useEffect(() => {
+  const callbackRef = React142.useRef(callback);
+  React142.useEffect(() => {
     callbackRef.current = callback;
   });
-  return React14.useMemo(() => (...args) => callbackRef.current?.(...args), []);
+  return React142.useMemo(() => (...args) => callbackRef.current?.(...args), []);
 }
 function useEscapeKeydown(onEscapeKeyDownProp, ownerDocument = globalThis?.document) {
   const onEscapeKeyDown = useCallbackRef(onEscapeKeyDownProp);
-  React152.useEffect(() => {
+  React15.useEffect(() => {
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
         onEscapeKeyDown(event);
@@ -29452,14 +29452,16 @@ import { jsx as jsx48, jsxs as jsxs9 } from "react/jsx-runtime";
 var container3 = {
   display: "flex",
   flexDirection: "row",
-  alignItems: "center",
+  alignItems: "flex-start",
   gap: "10px"
 };
 var greyCircle = {
   width: 20,
   height: 20,
   borderRadius: 10,
-  backgroundColor: "var(--footer-border)"
+  backgroundColor: "var(--footer-border)",
+  flexShrink: 0,
+  marginTop: 4
 };
 var PricingBulletPoint = ({ text, checked, children }) => {
   const checkmarkSVG = /* @__PURE__ */ jsxs9("svg", {
@@ -29469,7 +29471,8 @@ var PricingBulletPoint = ({ text, checked, children }) => {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     style: {
-      flexShrink: 0
+      flexShrink: 0,
+      marginTop: 4
     },
     children: [
       /* @__PURE__ */ jsx48("circle", {
@@ -29519,7 +29522,7 @@ var Title = ({ children }) => {
 };
 var Audience = ({ children }) => {
   return /* @__PURE__ */ jsx50("div", {
-    className: "fontbrand text-lg leading-none",
+    className: "fontbrand text-lg leading-snug",
     children
   });
 };
@@ -30536,7 +30539,7 @@ import {
   useRef as useRef122,
   useState as useState132
 } from "react";
-import React103, {
+import React102, {
   Suspense as Suspense2,
   forwardRef as forwardRef36,
   useCallback as useCallback102,
@@ -32222,7 +32225,7 @@ import {
   useRef as useRef142,
   useState as useState142
 } from "react";
-import React132, {
+import React133, {
   forwardRef as forwardRef37,
   Suspense as Suspense22,
   useCallback as useCallback122,
@@ -34601,7 +34604,7 @@ var useClickPreventionOnDoubleClick = (onClick, onDoubleClick, doubleClickToFull
   }, [doubleClickToFullscreen, handleDoubleClick, handlePointerDown, onClick]);
   return returnValue;
 };
-var reactVersion = React103.version.split(".")[0];
+var reactVersion = React102.version.split(".")[0];
 if (reactVersion === "0") {
   throw new Error(`Version ${reactVersion} of "react" is not supported by Remotion`);
 }
@@ -35618,7 +35621,7 @@ var useThumbnail = () => {
   }, [emitter]);
   return returnValue;
 };
-var reactVersion2 = React132.version.split(".")[0];
+var reactVersion2 = React133.version.split(".")[0];
 if (reactVersion2 === "0") {
   throw new Error(`Version ${reactVersion2} of "react" is not supported by Remotion`);
 }
@@ -44013,7 +44016,7 @@ import {
 import { BufferTarget, StreamTarget } from "mediabunny";
 
 // ../core/dist/esm/version.mjs
-var VERSION2 = "4.0.501";
+var VERSION2 = "4.0.503";
 
 // ../web-renderer/dist/esm/index.mjs
 import { AudioSample, VideoSample } from "mediabunny";
@@ -44588,15 +44591,17 @@ var runNestedHtmlInCanvasProbe = () => {
   const innerTarget = document.createElement("div");
   const outerCtx = outer.getContext("2d");
   const innerCtx = inner2.getContext("2d");
+  const density = devicePixelRatio;
+  const canvasSize = Math.ceil(4 * density);
   if (!outerCtx || !innerCtx || typeof outer.requestPaint !== "function" || typeof inner2.requestPaint !== "function") {
     return Promise.resolve(false);
   }
   outer.layoutSubtree = true;
   inner2.layoutSubtree = true;
-  outer.width = 4;
-  outer.height = 4;
-  inner2.width = 4;
-  inner2.height = 4;
+  outer.width = canvasSize;
+  outer.height = canvasSize;
+  inner2.width = canvasSize;
+  inner2.height = canvasSize;
   Object.assign(outer.style, {
     display: "block",
     height: "4px",
@@ -44647,10 +44652,10 @@ var runNestedHtmlInCanvasProbe = () => {
     inner2.addEventListener("paint", () => {
       try {
         innerCtx.reset();
+        innerCtx.scale(density, density);
         const transform = innerCtx.drawElementImage(innerTarget, 0, 0, 4, 4);
         innerTarget.style.transform = transform.toString();
         innerPainted = true;
-        requestAnimationFrame(() => outer.requestPaint());
       } catch {
         settle(false);
       }
@@ -44661,6 +44666,7 @@ var runNestedHtmlInCanvasProbe = () => {
       }
       try {
         outerCtx.reset();
+        outerCtx.scale(density, density);
         if (typeof outer.captureElementImage !== "function") {
           settle(false);
           return;
@@ -44669,13 +44675,15 @@ var runNestedHtmlInCanvasProbe = () => {
         const transform = outerCtx.drawElementImage(elementImage, 0, 0, 4, 4);
         elementImage.close();
         outerTarget.style.transform = transform.toString();
-        const pixel = outerCtx.getImageData(2, 2, 1, 1).data;
+        const sampleCoordinate = Math.floor(canvasSize / 2);
+        const pixel = outerCtx.getImageData(sampleCoordinate, sampleCoordinate, 1, 1).data;
         settle(pixel[0] > 200 && pixel[1] < 20 && pixel[2] < 20 && pixel[3] > 200);
       } catch {
         settle(false);
       }
     });
     inner2.requestPaint();
+    outer.requestPaint();
   });
 };
 var supportsNestedHtmlInCanvas = () => {
@@ -45061,7 +45069,110 @@ var getRealFrameRange = (durationInFrames, frameRange) => {
   }
   return resolved;
 };
-var makeInternalState = () => {
+var makeMaskImageLoaderState = ({
+  signal,
+  timeoutInMilliseconds
+}) => {
+  const images = new Set;
+  return {
+    cache: new Map,
+    images,
+    signal,
+    timeoutInMilliseconds,
+    [Symbol.dispose]: () => {
+      for (const image of images) {
+        image.close();
+      }
+      images.clear();
+    }
+  };
+};
+var validateMaskImageUrl = (src) => {
+  const url = new URL(src, document.baseURI);
+  if (url.protocol === "data:" || url.protocol === "blob:") {
+    return url.href;
+  }
+  if ((url.protocol === "http:" || url.protocol === "https:") && url.origin === window.location.origin) {
+    return url.href;
+  }
+  throw new Error(`@remotion/web-renderer only supports same-origin, data:, and blob: mask-image URLs. Received: ${url.href}`);
+};
+var loadMaskImage = async ({
+  src,
+  state
+}) => {
+  const resolvedSrc = validateMaskImageUrl(src);
+  if (state.signal?.aborted) {
+    throw new Error(`Loading mask-image URL was cancelled: ${resolvedSrc}`);
+  }
+  const controller = new AbortController;
+  let timedOut = false;
+  const onAbort = () => controller.abort();
+  state.signal?.addEventListener("abort", onAbort, { once: true });
+  const timeout = window.setTimeout(() => {
+    timedOut = true;
+    controller.abort();
+  }, state.timeoutInMilliseconds);
+  const operation = (async () => {
+    const response = await fetch(resolvedSrc, {
+      credentials: "same-origin",
+      signal: controller.signal
+    });
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status} ${response.statusText}`);
+    }
+    const blob = await response.blob();
+    const contentType = blob.type.toLowerCase().split(";")[0];
+    if (!contentType.startsWith("image/") || contentType === "image/svg+xml") {
+      throw new Error(`Expected a raster image, but received Content-Type "${blob.type || "unknown"}"`);
+    }
+    return createImageBitmap(blob);
+  })();
+  operation.then((image) => {
+    if (controller.signal.aborted) {
+      image.close();
+    }
+  }, () => {
+    return;
+  });
+  const aborted = new Promise((_, reject) => {
+    controller.signal.addEventListener("abort", () => reject(new Error("Mask image loading was aborted")), { once: true });
+  });
+  try {
+    const image = await Promise.race([operation, aborted]);
+    state.images.add(image);
+    return image;
+  } catch (error2) {
+    if (timedOut) {
+      throw new Error(`Timed out loading mask-image URL after ${state.timeoutInMilliseconds}ms: ${resolvedSrc}`);
+    }
+    if (state.signal?.aborted) {
+      throw new Error(`Loading mask-image URL was cancelled: ${resolvedSrc}`);
+    }
+    const detail = error2 instanceof Error ? error2.message : String(error2);
+    throw new Error(`Could not load mask-image URL ${resolvedSrc}: ${detail}`);
+  } finally {
+    window.clearTimeout(timeout);
+    state.signal?.removeEventListener("abort", onAbort);
+  }
+};
+var getMaskImage = ({
+  src,
+  state
+}) => {
+  const cached = state.cache.get(src);
+  if (cached) {
+    return cached;
+  }
+  const promise = loadMaskImage({ src, state });
+  state.cache.set(src, promise);
+  promise.catch(() => state.cache.delete(src));
+  return promise;
+};
+var makeInternalState = ({
+  signal = null,
+  maskImageTimeoutInMilliseconds = 30000
+} = {}) => {
   let drawnPrecomposedPixels = 0;
   let precomposedTextures = 0;
   let waitForReadyTime = 0;
@@ -45071,6 +45182,10 @@ var makeInternalState = () => {
   const helperCanvasState = {
     current: null
   };
+  const maskImageLoaderState = makeMaskImageLoaderState({
+    signal,
+    timeoutInMilliseconds: maskImageTimeoutInMilliseconds
+  });
   return {
     getDrawn3dPixels: () => drawnPrecomposedPixels,
     getPrecomposedTiles: () => precomposedTextures,
@@ -45082,10 +45197,12 @@ var makeInternalState = () => {
       precomposedTextures++;
     },
     helperCanvasState,
+    maskImageLoaderState,
     [Symbol.dispose]: () => {
       if (helperCanvasState.current) {
         helperCanvasState.current.cleanup();
       }
+      maskImageLoaderState[Symbol.dispose]();
     },
     getWaitForReadyTime: () => waitForReadyTime,
     addWaitForReadyTime: (time) => {
@@ -45977,8 +46094,133 @@ var getMaskImageValue = (computedStyle) => {
   }
   return value;
 };
+var parseUrlFunction = (value) => {
+  const trimmed = value.trim();
+  if (!trimmed.toLowerCase().startsWith("url(")) {
+    return null;
+  }
+  let index2 = 4;
+  while (/\s/.test(trimmed[index2] ?? "")) {
+    index2++;
+  }
+  const quote = trimmed[index2] === '"' || trimmed[index2] === "'" ? trimmed[index2] : null;
+  if (quote) {
+    index2++;
+  }
+  let url = "";
+  let closedQuote = quote === null;
+  for (;index2 < trimmed.length; index2++) {
+    const char = trimmed[index2];
+    if (char === "\\") {
+      const next = trimmed[index2 + 1];
+      if (next === undefined) {
+        return null;
+      }
+      url += next;
+      index2++;
+      continue;
+    }
+    if (quote && char === quote) {
+      closedQuote = true;
+      index2++;
+      break;
+    }
+    if (!quote && char === ")") {
+      break;
+    }
+    url += char;
+  }
+  if (!closedQuote) {
+    return null;
+  }
+  while (/\s/.test(trimmed[index2] ?? "")) {
+    index2++;
+  }
+  if (trimmed[index2] !== ")") {
+    return null;
+  }
+  index2++;
+  while (/\s/.test(trimmed[index2] ?? "")) {
+    index2++;
+  }
+  if (index2 !== trimmed.length) {
+    return null;
+  }
+  return url.trim();
+};
+var getMaskProperty = ({
+  standard,
+  prefixed
+}) => standard || prefixed;
+var normalizeCssValue = (value) => value.trim().toLowerCase().replace(/\s+/g, " ");
+var validateUrlMaskImageStyle = (computedStyle) => {
+  const maskSize = normalizeCssValue(getMaskProperty({
+    standard: computedStyle.maskSize,
+    prefixed: computedStyle.webkitMaskSize
+  }));
+  const maskPosition = normalizeCssValue(getMaskProperty({
+    standard: computedStyle.maskPosition,
+    prefixed: computedStyle.webkitMaskPosition
+  }));
+  const maskRepeat = normalizeCssValue(getMaskProperty({
+    standard: computedStyle.maskRepeat,
+    prefixed: computedStyle.webkitMaskRepeat
+  }));
+  const maskMode = normalizeCssValue(computedStyle.maskMode);
+  const maskOrigin = normalizeCssValue(getMaskProperty({
+    standard: computedStyle.maskOrigin,
+    prefixed: computedStyle.webkitMaskOrigin
+  }));
+  const maskClip = normalizeCssValue(getMaskProperty({
+    standard: computedStyle.maskClip,
+    prefixed: computedStyle.webkitMaskClip
+  }));
+  const isSupportedPosition = maskPosition === "0% 0%" || maskPosition === "0px 0px" || maskPosition === "left top";
+  const unsupportedProperties = [
+    maskSize !== "100% 100%" ? `mask-size: ${maskSize}` : null,
+    !isSupportedPosition ? `mask-position: ${maskPosition}` : null,
+    maskRepeat !== "no-repeat" ? `mask-repeat: ${maskRepeat}` : null,
+    maskMode !== "" && maskMode !== "alpha" && maskMode !== "match-source" ? `mask-mode: ${maskMode}` : null,
+    maskOrigin !== "border-box" ? `mask-origin: ${maskOrigin}` : null,
+    maskClip !== "border-box" ? `mask-clip: ${maskClip}` : null
+  ].filter((property) => property !== null);
+  if (unsupportedProperties.length > 0) {
+    throw new Error(`@remotion/web-renderer only supports URL masks with mask-size: 100% 100%, mask-position: 0% 0%, mask-repeat: no-repeat, the border box as origin and clip, and alpha semantics. Unsupported value${unsupportedProperties.length === 1 ? "" : "s"}: ${unsupportedProperties.join(", ")}`);
+  }
+};
 var parseMaskImage = (maskImageValue) => {
-  return parseLinearGradient(maskImageValue);
+  const gradientInfo = parseLinearGradient(maskImageValue);
+  if (gradientInfo) {
+    return { type: "linear-gradient", gradientInfo };
+  }
+  const url = parseUrlFunction(maskImageValue);
+  if (url !== null) {
+    if (!url) {
+      throw new Error("mask-image: url() must contain a URL");
+    }
+    return { type: "url", src: new URL(url, document.baseURI).href };
+  }
+  if (maskImageValue.trim().toLowerCase().startsWith("url(")) {
+    throw new Error("@remotion/web-renderer only supports a single mask-image: url() layer");
+  }
+  return null;
+};
+var elementHasUrlMaskImage = (element) => {
+  const value = getMaskImageValue(getComputedStyle(element));
+  return value?.trim().toLowerCase().startsWith("url(") ?? false;
+};
+var containsUrlMaskImage = (element) => {
+  if (elementHasUrlMaskImage(element)) {
+    return true;
+  }
+  const children = element.querySelectorAll("*");
+  for (let index2 = 0;index2 < children.length; index2++) {
+    const child = children[index2];
+    if (elementHasUrlMaskImage(child)) {
+      return true;
+    }
+  }
+  return false;
 };
 var parseTransformOrigin = (transformOrigin2) => {
   if (transformOrigin2.trim() === "") {
@@ -46083,6 +46325,9 @@ var calculateTransforms = ({
       opacity2 = parseFloat(computedStyle.opacity);
       const maskImageValue = getMaskImageValue(computedStyle);
       maskImageInfo = maskImageValue ? parseMaskImage(maskImageValue) : null;
+      if (maskImageInfo?.type === "url") {
+        validateUrlMaskImageStyle(computedStyle);
+      }
       filterForPrecompositing = filterRequiresPrecompositing(computedStyle.filter);
       const originalMaskImage = parent.style.maskImage;
       const originalWebkitMaskImage = parent.style.webkitMaskImage;
@@ -47914,24 +48159,34 @@ var getPrecomposeRectForMask = (element) => {
   const boundingRect = getBiggestBoundingClientRect(element);
   return boundingRect;
 };
-var handleMask = ({
-  gradientInfo,
+var handleMask = async ({
+  maskImageInfo,
   maskRect,
   precomposeRect,
   tempContext,
-  scale
+  scale,
+  internalState
 }) => {
   const rectToFill = new DOMRect((maskRect.left - precomposeRect.left) * scale, (maskRect.top - precomposeRect.top) * scale, maskRect.width * scale, maskRect.height * scale);
-  const gradient = createCanvasGradient({
-    ctx: tempContext,
-    rect: rectToFill,
-    gradientInfo,
-    offsetLeft: 0,
-    offsetTop: 0
+  if (maskImageInfo.type === "linear-gradient") {
+    const gradient = createCanvasGradient({
+      ctx: tempContext,
+      rect: rectToFill,
+      gradientInfo: maskImageInfo.gradientInfo,
+      offsetLeft: 0,
+      offsetTop: 0
+    });
+    tempContext.globalCompositeOperation = "destination-in";
+    tempContext.fillStyle = gradient;
+    tempContext.fillRect(rectToFill.left, rectToFill.top, rectToFill.width, rectToFill.height);
+    return;
+  }
+  const image = await getMaskImage({
+    src: maskImageInfo.src,
+    state: internalState.maskImageLoaderState
   });
   tempContext.globalCompositeOperation = "destination-in";
-  tempContext.fillStyle = gradient;
-  tempContext.fillRect(rectToFill.left, rectToFill.top, rectToFill.width, rectToFill.height);
+  tempContext.drawImage(image, rectToFill.left, rectToFill.top, rectToFill.width, rectToFill.height);
 };
 var scaleRect = ({
   rect,
@@ -48048,12 +48303,13 @@ var processNode = async ({
         })
       }));
       if (precompositing.needsMaskImage) {
-        handleMask({
-          gradientInfo: precompositing.needsMaskImage,
+        await handleMask({
+          maskImageInfo: precompositing.needsMaskImage,
           maskRect: dimensions,
           precomposeRect,
           tempContext,
-          scale
+          scale,
+          internalState
         });
         if (waitForPageResponsiveness !== null) {
           await waitForPageResponsiveness();
@@ -48076,9 +48332,21 @@ var processNode = async ({
         }
       }
       const previousTransform = context.getTransform();
-      context.setTransform(new DOMMatrix);
+      const is3DPrecomposition = precompositing.needs3DTransformViaWebGL;
+      if (is3DPrecomposition) {
+        context.setTransform(new DOMMatrix);
+      } else {
+        setTransform({
+          ctx: context,
+          transform: totalMatrix,
+          parentRect,
+          scale
+        });
+      }
+      const destinationRect = is3DPrecomposition ? rectAfterTransforms : precomposeRect;
+      const parentOffsetScale = is3DPrecomposition ? scale : 1;
       const drawPrecomposedCanvas = () => {
-        context.drawImage(drawable, 0, 0, drawable.width, drawable.height, rectAfterTransforms.left - parentRect.x * scale, rectAfterTransforms.top - parentRect.y * scale, rectAfterTransforms.width, rectAfterTransforms.height);
+        context.drawImage(drawable, 0, 0, drawable.width, drawable.height, destinationRect.left - parentRect.x * parentOffsetScale, destinationRect.top - parentRect.y * parentOffsetScale, destinationRect.width, destinationRect.height);
       };
       if (precompositing.needsFilterPrecompositing) {
         applyFilterToDrawOperation({
@@ -48157,6 +48425,36 @@ var findWords = (span) => {
   }
   return tokens;
 };
+var fontStretchOptions = [
+  { keyword: "ultra-condensed", percentage: 50 },
+  { keyword: "extra-condensed", percentage: 62.5 },
+  { keyword: "condensed", percentage: 75 },
+  { keyword: "semi-condensed", percentage: 87.5 },
+  { keyword: "normal", percentage: 100 },
+  { keyword: "semi-expanded", percentage: 112.5 },
+  { keyword: "expanded", percentage: 125 },
+  { keyword: "extra-expanded", percentage: 150 },
+  { keyword: "ultra-expanded", percentage: 200 }
+];
+var getCanvasFontStretch = (fontStretch) => {
+  const keyword = fontStretchOptions.find((option) => option.keyword === fontStretch);
+  if (keyword) {
+    return keyword.keyword;
+  }
+  const percentage = Number.parseFloat(fontStretch);
+  if (!Number.isFinite(percentage)) {
+    return "normal";
+  }
+  let closest = fontStretchOptions[0];
+  for (const option of fontStretchOptions.slice(1)) {
+    const distance2 = Math.abs(option.percentage - percentage);
+    const closestDistance = Math.abs(closest.percentage - percentage);
+    if (distance2 < closestDistance || distance2 === closestDistance && percentage >= 100) {
+      closest = option;
+    }
+  }
+  return closest.keyword;
+};
 var parsePaintOrder = (paintOrder) => {
   const paintOrderValue = paintOrder || "normal";
   const paintOrderParts = paintOrderValue === "normal" ? ["fill", "stroke"] : paintOrderValue.split(/\s+/).filter(Boolean);
@@ -48415,7 +48713,7 @@ var drawText = ({
     contextToDraw.font = `${fontStyle} ${fontWeight} ${fontSizePx}px ${fontFamily}`;
     contextToDraw.fontVariantCaps = fontVariantCaps;
     contextToDraw.fontKerning = fontKerning;
-    contextToDraw.fontStretch = fontStretch;
+    contextToDraw.fontStretch = getCanvasFontStretch(fontStretch);
     contextToDraw.textRendering = textRendering;
     contextToDraw.fillStyle = onlyBackgroundClipText ? "black" : webkitTextFillColor;
     contextToDraw.letterSpacing = letterSpacing;
@@ -48654,26 +48952,34 @@ var createLayer = async ({
   const scaledWidth = Math.ceil(cutout.width * scale);
   const scaledHeight = Math.ceil(cutout.height * scale);
   if (!onlyBackgroundClipText && element instanceof HTMLElement && htmlInCanvasContext && onHtmlInCanvasLayerOutcome) {
-    const hasNestedHtmlInCanvas = containsLayoutSubtreeCanvas(element);
-    try {
-      const offCtx = await drawWithHtmlInCanvas({
-        htmlInCanvasContext,
-        element,
-        scaledWidth,
-        scaledHeight,
-        waitForRenderReady,
-        useElementImage: hasNestedHtmlInCanvas
-      });
-      onHtmlInCanvasLayerOutcome({ native: true });
-      return offCtx;
-    } catch (err) {
-      const detail = err instanceof Error ? err.message : JSON.stringify(err);
+    if (containsUrlMaskImage(element)) {
       onHtmlInCanvasLayerOutcome({
         native: false,
-        reason: `drawElementImage failed (${detail}); falling back to the built-in DOM composer.`,
-        shouldWarn: true
+        reason: "URL masks are loaded by the built-in DOM composer to guarantee deterministic rendering.",
+        shouldWarn: false
       });
-      Internals.Log.verbose({ logLevel, tag: "@remotion/web-renderer" }, "HTML-in-canvas capture failed, falling back to software compose", err);
+    } else {
+      const hasNestedHtmlInCanvas = containsLayoutSubtreeCanvas(element);
+      try {
+        const offCtx = await drawWithHtmlInCanvas({
+          htmlInCanvasContext,
+          element,
+          scaledWidth,
+          scaledHeight,
+          waitForRenderReady,
+          useElementImage: hasNestedHtmlInCanvas
+        });
+        onHtmlInCanvasLayerOutcome({ native: true });
+        return offCtx;
+      } catch (err) {
+        const detail = err instanceof Error ? err.message : JSON.stringify(err);
+        onHtmlInCanvasLayerOutcome({
+          native: false,
+          reason: `drawElementImage failed (${detail}); falling back to the built-in DOM composer.`,
+          shouldWarn: true
+        });
+        Internals.Log.verbose({ logLevel, tag: "@remotion/web-renderer" }, "HTML-in-canvas capture failed, falling back to software compose", err);
+      }
     }
   }
   const canvas = new OffscreenCanvas(scaledWidth, scaledHeight);
@@ -49005,7 +49311,10 @@ var internalRenderMediaOnWeb = async ({
       errorHolder,
       htmlInCanvasContext
     } = scaffold;
-    const internalState = __using2(__stack2, makeInternalState(), 0);
+    const internalState = __using2(__stack2, makeInternalState({
+      signal,
+      maskImageTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds
+    }), 0);
     const pageResponsivenessController = createPageResponsivenessController({
       intervalInMilliseconds: pageResponsivenessIntervalInMilliseconds,
       now: () => performance.now(),
@@ -50638,7 +50947,7 @@ var useTransparentVideoSource = ({
   fallbackVideoSrc,
   videoSrc
 }) => {
-  const [src, setSrc] = useState59(videoSrc);
+  const [src, setSrc] = useState59(null);
   useEffect60(() => {
     setSrc(isWebkit() ? fallbackVideoSrc : videoSrc);
   }, [fallbackVideoSrc, videoSrc]);
@@ -50694,7 +51003,7 @@ var MakeVideosAgentically = ({
     children: [
       /* @__PURE__ */ jsx121("div", {
         className: "flex aspect-square w-full items-start",
-        children: showVideo ? /* @__PURE__ */ jsx121("video", {
+        children: showVideo && src ? /* @__PURE__ */ jsx121("video", {
           ref: videoRef,
           src,
           muted: true,
@@ -50761,7 +51070,7 @@ var MakeVideosInteractively = ({
     children: [
       /* @__PURE__ */ jsx125("div", {
         className: "flex aspect-square w-full items-start",
-        children: showVideo ? /* @__PURE__ */ jsx125("video", {
+        children: showVideo && src ? /* @__PURE__ */ jsx125("video", {
           src,
           autoPlay: true,
           muted: true,
@@ -50824,7 +51133,7 @@ var MakeVideosProgrammatically = ({
     children: [
       /* @__PURE__ */ jsx127("div", {
         className: "flex aspect-square w-full items-start",
-        children: showVideo ? /* @__PURE__ */ jsx127("video", {
+        children: showVideo && src ? /* @__PURE__ */ jsx127("video", {
           src,
           muted: true,
           autoPlay: true,