@remotion/promo-pages 4.0.470 → 4.0.472

package/dist/design.js

@@ -33,10 +33,10 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 });
 
 // ../design/dist/esm/index.mjs
-import * as React22 from "react";
+import * as React23 from "react";
 import * as React3 from "react";
 import { Fragment as Fragment2, jsx as jsx39 } from "react/jsx-runtime";
-import React52, { useCallback as useCallback25, useRef as useRef27, useState as useState22 } from "react";
+import React52, { useCallback as useCallback25, useRef as useRef28, useState as useState22 } from "react";
 
 // ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -1378,7 +1378,7 @@ var getDefaultConfig = () => {
 var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 
 // ../design/dist/esm/index.mjs
-import React33, { useEffect as useEffect22, useMemo as useMemo40, useState as useState21 } from "react";
+import React35, { useEffect as useEffect22, useMemo as useMemo40, useState as useState21 } from "react";
 
 // ../paths/dist/esm/index.mjs
 var cutLInstruction = ({
@@ -5769,10 +5769,12 @@ import { jsx as jsx92 } from "react/jsx-runtime";
 import { createContext as createContext14 } from "react";
 import React11, { useCallback as useCallback5, useMemo as useMemo12, useRef as useRef4, useState as useState3 } from "react";
 import { jsx as jsx102 } from "react/jsx-runtime";
-import React12, { forwardRef as forwardRef2, useContext as useContext16, useMemo as useMemo13, useState as useState4 } from "react";
-import { useContext as useContext15, useRef as useRef5 } from "react";
-import { createContext as createContext15 } from "react";
+import React12, { createContext as createContext15 } from "react";
 import { jsx as jsx112 } from "react/jsx-runtime";
+import React13, { forwardRef as forwardRef2, useContext as useContext16, useMemo as useMemo13, useState as useState4 } from "react";
+import { useContext as useContext15, useRef as useRef5 } from "react";
+import { createContext as createContext16 } from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef4,
   useEffect as useEffect5,
@@ -5781,13 +5783,13 @@ import {
   useRef as useRef9,
   useState as useState6
 } from "react";
-import React14, { useCallback as useCallback6, useImperativeHandle, useMemo as useMemo16, useRef as useRef8 } from "react";
+import React15, { useCallback as useCallback6, useImperativeHandle, useMemo as useMemo16, useRef as useRef8 } from "react";
 import { useEffect as useEffect4, useMemo as useMemo15, useRef as useRef7 } from "react";
-import { jsx as jsx12 } from "react/jsx-runtime";
 import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 import { useContext as useContext18, useLayoutEffect as useLayoutEffect4, useState as useState8 } from "react";
 import {
-  createContext as createContext16,
+  createContext as createContext17,
   useCallback as useCallback7,
   useImperativeHandle as useImperativeHandle3,
   useLayoutEffect as useLayoutEffect3,
@@ -5795,17 +5797,17 @@ import {
   useRef as useRef10,
   useState as useState7
 } from "react";
-import { jsx as jsx14 } from "react/jsx-runtime";
-import { forwardRef as forwardRef7, useCallback as useCallback13, useContext as useContext30 } from "react";
-import React15, { createContext as createContext17, useMemo as useMemo18 } from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
-import { useContext as useContext19 } from "react";
-import { createContext as createContext18, useEffect as useEffect6, useState as useState9 } from "react";
+import { forwardRef as forwardRef7, useCallback as useCallback13, useContext as useContext30 } from "react";
+import React16, { createContext as createContext18, useMemo as useMemo18 } from "react";
 import { jsx as jsx16 } from "react/jsx-runtime";
-import { createContext as createContext19, useMemo as useMemo19, useReducer } from "react";
+import { useContext as useContext19 } from "react";
+import { createContext as createContext19, useEffect as useEffect6, useState as useState9 } from "react";
 import { jsx as jsx17 } from "react/jsx-runtime";
+import { createContext as createContext20, useMemo as useMemo19, useReducer } from "react";
+import { jsx as jsx18 } from "react/jsx-runtime";
 import { useCallback as useCallback12 } from "react";
-import React21, {
+import React22, {
   forwardRef as forwardRef5,
   useContext as useContext28,
   useEffect as useEffect14,
@@ -5815,8 +5817,8 @@ import React21, {
   useState as useState14
 } from "react";
 import { useContext as useContext21, useLayoutEffect as useLayoutEffect5, useRef as useRef14 } from "react";
-import React18, {
-  createContext as createContext20,
+import React19, {
+  createContext as createContext21,
   createRef as createRef2,
   useCallback as useCallback8,
   useContext as useContext20,
@@ -5826,7 +5828,7 @@ import React18, {
   useState as useState10
 } from "react";
 import { useMemo as useMemo20, useRef as useRef11 } from "react";
-import { jsx as jsx18, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs22 } from "react/jsx-runtime";
 import { useRef as useRef13 } from "react";
 import { useContext as useContext23, useEffect as useEffect8, useMemo as useMemo22, useState as useState11 } from "react";
 import { useContext as useContext22 } from "react";
@@ -5839,7 +5841,7 @@ import {
 } from "react";
 import { useCallback as useCallback10, useMemo as useMemo25, useRef as useRef16 } from "react";
 import { useContext as useContext25, useMemo as useMemo24 } from "react";
-import React19, {
+import React20, {
   useCallback as useCallback9,
   useContext as useContext24,
   useEffect as useEffect9,
@@ -5848,13 +5850,13 @@ import React19, {
   useRef as useRef15,
   useState as useState12
 } from "react";
-import { jsx as jsx19 } from "react/jsx-runtime";
-import React20 from "react";
+import { jsx as jsx20 } from "react/jsx-runtime";
+import React21 from "react";
 import { useEffect as useEffect10, useState as useState13 } from "react";
 import { useEffect as useEffect11, useRef as useRef17 } from "react";
 import { useEffect as useEffect13 } from "react";
-import { createContext as createContext21, useContext as useContext27, useMemo as useMemo26 } from "react";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { createContext as createContext22, useContext as useContext27, useMemo as useMemo26 } from "react";
+import { jsx as jsx21 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef6,
   useContext as useContext29,
@@ -5864,8 +5866,8 @@ import {
   useMemo as useMemo28,
   useRef as useRef20
 } from "react";
-import { jsx as jsx21 } from "react/jsx-runtime";
 import { jsx as jsx222 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef8,
   useCallback as useCallback14,
@@ -5875,9 +5877,9 @@ import {
   useRef as useRef21,
   useState as useState15
 } from "react";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 import {
-  createContext as createContext22,
+  createContext as createContext23,
   forwardRef as forwardRef9,
   useCallback as useCallback15,
   useContext as useContext31,
@@ -5885,83 +5887,82 @@ import {
   useMemo as useMemo30,
   useRef as useRef22
 } from "react";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef10,
   useCallback as useCallback16,
   useContext as useContext32,
   useEffect as useEffect17,
+  useImperativeHandle as useImperativeHandle7,
   useMemo as useMemo31,
+  useRef as useRef23,
   useState as useState16
 } from "react";
-import { jsx as jsx25 } from "react/jsx-runtime";
-import { forwardRef as forwardRef11, useCallback as useCallback17, useState as useState17 } from "react";
 import { jsx as jsx26 } from "react/jsx-runtime";
-import {
-  useCallback as useCallback18,
-  useContext as useContext33,
-  useImperativeHandle as useImperativeHandle7,
-  useLayoutEffect as useLayoutEffect10,
-  useRef as useRef23
-} from "react";
+import { forwardRef as forwardRef11, useCallback as useCallback17, useState as useState17 } from "react";
 import { jsx as jsx27 } from "react/jsx-runtime";
+import { useCallback as useCallback18, useContext as useContext33, useLayoutEffect as useLayoutEffect10, useRef as useRef24 } from "react";
+import { jsx as jsx28 } from "react/jsx-runtime";
 import { createRef as createRef3 } from "react";
-import React28 from "react";
+import React29 from "react";
 import {
   useCallback as useCallback19,
   useImperativeHandle as useImperativeHandle8,
   useMemo as useMemo322,
-  useRef as useRef24,
+  useRef as useRef25,
   useState as useState18
 } from "react";
-import { jsx as jsx28 } from "react/jsx-runtime";
-import React29 from "react";
-import { useMemo as useMemo34 } from "react";
-import { createContext as createContext23, useContext as useContext34, useMemo as useMemo33 } from "react";
 import { jsx as jsx29 } from "react/jsx-runtime";
+import React30 from "react";
+import { useMemo as useMemo34 } from "react";
+import { createContext as createContext24, useContext as useContext34, useMemo as useMemo33 } from "react";
 import { jsx as jsx30 } from "react/jsx-runtime";
-import React31 from "react";
-import React32, { createContext as createContext24 } from "react";
+import { jsx as jsx31 } from "react/jsx-runtime";
+import React32 from "react";
+import React33, { createContext as createContext25 } from "react";
+import React34, { useContext as useContext35 } from "react";
 import { useCallback as useCallback22 } from "react";
 import {
   useCallback as useCallback20,
-  useContext as useContext35,
+  useContext as useContext36,
   useEffect as useEffect18,
   useLayoutEffect as useLayoutEffect11,
   useMemo as useMemo35,
   useState as useState19
 } from "react";
-import { jsx as jsx31 } from "react/jsx-runtime";
-import React34, {
+import { jsx as jsx322 } from "react/jsx-runtime";
+import React36, {
   forwardRef as forwardRef12,
-  useContext as useContext36,
+  useCallback as useCallback21,
+  useContext as useContext37,
   useEffect as useEffect20,
   useImperativeHandle as useImperativeHandle9,
   useMemo as useMemo36,
-  useRef as useRef25,
-  useState as useState20,
-  useCallback as useCallback21
+  useRef as useRef26,
+  useState as useState20
 } from "react";
 import { useEffect as useEffect19 } from "react";
-import { jsx as jsx322 } from "react/jsx-runtime";
 import { jsx as jsx33 } from "react/jsx-runtime";
-import React36, { useMemo as useMemo37 } from "react";
 import { jsx as jsx34 } from "react/jsx-runtime";
-import { Children, forwardRef as forwardRef13, useMemo as useMemo38 } from "react";
-import React37 from "react";
-import React38, { createContext as createContext25 } from "react";
+import React38, { useMemo as useMemo37 } from "react";
 import { jsx as jsx35 } from "react/jsx-runtime";
+import {
+  Children,
+  forwardRef as forwardRef13,
+  useMemo as useMemo38
+} from "react";
+import React39 from "react";
 import { jsx as jsx36 } from "react/jsx-runtime";
-import React40 from "react";
-import { forwardRef as forwardRef15, useCallback as useCallback23, useContext as useContext38 } from "react";
+import React41 from "react";
+import { forwardRef as forwardRef15, useCallback as useCallback23, useContext as useContext39 } from "react";
 import {
   forwardRef as forwardRef14,
-  useContext as useContext37,
+  useContext as useContext38,
   useEffect as useEffect21,
   useImperativeHandle as useImperativeHandle10,
   useLayoutEffect as useLayoutEffect12,
   useMemo as useMemo39,
-  useRef as useRef26
+  useRef as useRef27
 } from "react";
 import { jsx as jsx37 } from "react/jsx-runtime";
 import { jsx as jsx38 } from "react/jsx-runtime";
@@ -6134,11 +6135,57 @@ function truthy2(value) {
   return Boolean(value);
 }
 var getRegex = () => /^([a-zA-Z0-9-\u4E00-\u9FFF])+$/g;
+var isFolderNameValid = (name) => name.match(getRegex());
+var validateFolderName = (name) => {
+  if (name === undefined || name === null) {
+    throw new TypeError("You must pass a name to a <Folder />.");
+  }
+  if (typeof name !== "string") {
+    throw new TypeError(`The "name" you pass into <Folder /> must be a string. Got: ${typeof name}`);
+  }
+  if (!isFolderNameValid(name)) {
+    throw new Error(`Folder name can only contain a-z, A-Z, 0-9 and -. You passed ${name}`);
+  }
+};
 var invalidFolderNameErrorMessage = `Folder name must match ${String(getRegex())}`;
 var FolderContext = createContext6({
   folderName: null,
   parentName: null
 });
+var Folder = (props) => {
+  const { name, children } = props;
+  const parent = useContext2(FolderContext);
+  const { registerFolder, unregisterFolder } = useContext2(CompositionSetters);
+  const nonce = useNonce();
+  const stack = props.stack ?? null;
+  validateFolderName(name);
+  const parentNameArr = [parent.parentName, parent.folderName].filter(truthy2);
+  const parentName = parentNameArr.length === 0 ? null : parentNameArr.join("/");
+  const value = useMemo2(() => {
+    return {
+      folderName: name,
+      parentName
+    };
+  }, [name, parentName]);
+  useEffect(() => {
+    registerFolder(name, parentName, nonce.get(), stack);
+    return () => {
+      unregisterFolder(name, parentName);
+    };
+  }, [
+    name,
+    parent.folderName,
+    parentName,
+    registerFolder,
+    unregisterFolder,
+    nonce,
+    stack
+  ]);
+  return /* @__PURE__ */ jsx22(FolderContext.Provider, {
+    value,
+    children
+  });
+};
 function getNodeEnvString() {
   return ["NOD", "E_EN", "V"].join("");
 }
@@ -7087,7 +7134,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.470";
+var VERSION = "4.0.472";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -7457,7 +7504,7 @@ var sequenceVisualStyleSchema = {
     description: "Offset"
   },
   "style.scale": {
-    type: "number",
+    type: "scale",
     min: 0.05,
     max: 100,
     step: 0.01,
@@ -7465,7 +7512,7 @@ var sequenceVisualStyleSchema = {
     description: "Scale"
   },
   "style.rotate": {
-    type: "rotation",
+    type: "rotation-css",
     step: 1,
     default: "0deg",
     description: "Rotation"
@@ -7476,7 +7523,8 @@ var sequenceVisualStyleSchema = {
     max: 1,
     step: 0.01,
     default: 1,
-    description: "Opacity"
+    description: "Opacity",
+    hiddenFromList: false
   }
 };
 var sequencePremountSchema = {
@@ -7485,10 +7533,15 @@ var sequencePremountSchema = {
     default: 0,
     description: "Premount For",
     min: 0,
-    step: 1
+    step: 1,
+    hiddenFromList: false
   },
   postmountFor: {
-    type: "hidden"
+    type: "number",
+    default: 0,
+    min: 0,
+    step: 1,
+    hiddenFromList: true
   },
   styleWhilePremounted: {
     type: "hidden"
@@ -7506,8 +7559,23 @@ var hiddenField = {
   default: false,
   description: "Hidden"
 };
+var durationInFramesField = {
+  type: "number",
+  default: undefined,
+  min: 1,
+  step: 1,
+  hiddenFromList: true
+};
+var fromField = {
+  type: "number",
+  default: 0,
+  step: 1,
+  hiddenFromList: true
+};
 var sequenceSchema = {
   hidden: hiddenField,
+  from: fromField,
+  durationInFrames: durationInFramesField,
   layout: {
     type: "enum",
     default: "absolute-fill",
@@ -7688,6 +7756,25 @@ var SequenceManagerProvider = ({ children }) => {
     })
   });
 };
+var IsInsideSeriesContext = createContext15(false);
+var IsInsideSeriesContainer = ({ children }) => {
+  return /* @__PURE__ */ jsx112(IsInsideSeriesContext.Provider, {
+    value: true,
+    children
+  });
+};
+var IsNotInsideSeriesProvider = ({ children }) => {
+  return /* @__PURE__ */ jsx112(IsInsideSeriesContext.Provider, {
+    value: false,
+    children
+  });
+};
+var useRequireToBeInsideSeries = () => {
+  const isInsideSeries = React12.useContext(IsInsideSeriesContext);
+  if (!isInsideSeries) {
+    throw new Error("This component must be inside a <Series /> component.");
+  }
+};
 var ENABLE_V5_BREAKING_CHANGES = false;
 var deleteNestedKey = (obj, keysToRemove) => {
   for (const key of keysToRemove) {
@@ -7720,454 +7807,438 @@ var deleteNestedKey = (obj, keysToRemove) => {
   }
   return obj;
 };
-var OverrideIdsToNodePathsGettersContext = createContext15({
-  overrideIdToNodePathMappings: {}
-});
-var OverrideIdsToNodePathsSettersContext = createContext15({
-  setOverrideIdToNodePath: () => {
-    throw new Error("OverrideIdsToNodePathsSettersContext not initialized");
+var NEWTON_ITERATIONS = 4;
+var NEWTON_MIN_SLOPE = 0.001;
+var SUBDIVISION_PRECISION = 0.0000001;
+var SUBDIVISION_MAX_ITERATIONS = 10;
+var kSplineTableSize = 11;
+var kSampleStepSize = 1 / (kSplineTableSize - 1);
+var float32ArraySupported = typeof Float32Array === "function";
+function a(aA1, aA2) {
+  return 1 - 3 * aA2 + 3 * aA1;
+}
+function b(aA1, aA2) {
+  return 3 * aA2 - 6 * aA1;
+}
+function c(aA1) {
+  return 3 * aA1;
+}
+function calcBezier(aT, aA1, aA2) {
+  return ((a(aA1, aA2) * aT + b(aA1, aA2)) * aT + c(aA1)) * aT;
+}
+function getSlope(aT, aA1, aA2) {
+  return 3 * a(aA1, aA2) * aT * aT + 2 * b(aA1, aA2) * aT + c(aA1);
+}
+function binarySubdivide({
+  aX,
+  _aA,
+  _aB,
+  mX1,
+  mX2
+}) {
+  let currentX;
+  let currentT;
+  let i = 0;
+  let aA = _aA;
+  let aB = _aB;
+  do {
+    currentT = aA + (aB - aA) / 2;
+    currentX = calcBezier(currentT, mX1, mX2) - aX;
+    if (currentX > 0) {
+      aB = currentT;
+    } else {
+      aA = currentT;
+    }
+  } while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS);
+  return currentT;
+}
+function newtonRaphsonIterate(aX, _aGuessT, mX1, mX2) {
+  let aGuessT = _aGuessT;
+  for (let i = 0;i < NEWTON_ITERATIONS; ++i) {
+    const currentSlope = getSlope(aGuessT, mX1, mX2);
+    if (currentSlope === 0) {
+      return aGuessT;
+    }
+    const currentX = calcBezier(aGuessT, mX1, mX2) - aX;
+    aGuessT -= currentX / currentSlope;
   }
-});
-var mergeOverrides = ({
-  descriptor,
-  codeOverrides,
-  dragOverrides
-}) => {
-  if (!codeOverrides && !dragOverrides) {
-    return { params: descriptor.params, effectKey: descriptor.effectKey };
+  return aGuessT;
+}
+function bezier(mX1, mY1, mX2, mY2) {
+  if (!(mX1 >= 0 && mX1 <= 1 && mX2 >= 0 && mX2 <= 1)) {
+    throw new Error("bezier x values must be in [0, 1] range");
   }
-  const merged = {
-    ...descriptor.params
-  };
-  if (codeOverrides) {
-    for (const [key, value] of Object.entries(codeOverrides)) {
-      if (value !== undefined) {
-        merged[key] = value;
-      }
+  const sampleValues = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize);
+  if (mX1 !== mY1 || mX2 !== mY2) {
+    for (let i = 0;i < kSplineTableSize; ++i) {
+      sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
     }
   }
-  if (dragOverrides) {
-    for (const [key, value] of Object.entries(dragOverrides)) {
-      merged[key] = value;
+  function getTForX(aX) {
+    let intervalStart = 0;
+    let currentSample = 1;
+    const lastSample = kSplineTableSize - 1;
+    for (;currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) {
+      intervalStart += kSampleStepSize;
     }
+    --currentSample;
+    const dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]);
+    const guessForT = intervalStart + dist * kSampleStepSize;
+    const initialSlope = getSlope(guessForT, mX1, mX2);
+    if (initialSlope >= NEWTON_MIN_SLOPE) {
+      return newtonRaphsonIterate(aX, guessForT, mX1, mX2);
+    }
+    if (initialSlope === 0) {
+      return guessForT;
+    }
+    return binarySubdivide({
+      aX,
+      _aA: intervalStart,
+      _aB: intervalStart + kSampleStepSize,
+      mX1,
+      mX2
+    });
   }
-  return {
-    params: merged,
-    effectKey: descriptor.definition.calculateKey(merged)
-  };
-};
-var extractCodeOverrides = (propStatus) => {
-  if (!propStatus) {
-    return null;
-  }
-  const out = {};
-  let hasAny = false;
-  for (const [key, status] of Object.entries(propStatus)) {
-    if (status.canUpdate) {
-      out[key] = status.codeValue;
-      hasAny = true;
+  return function(x) {
+    const clampedX = Math.min(1, Math.max(0, x));
+    if (mX1 === mY1 && mX2 === mY2) {
+      return clampedX;
+    }
+    if (clampedX === 0) {
+      return 0;
+    }
+    if (clampedX === 1) {
+      return 1;
     }
+    return calcBezier(getTForX(clampedX), mY1, mY2);
+  };
+}
+var clampUnit = (t) => Math.min(1, Math.max(0, t));
+
+class Easing {
+  static step0(n) {
+    return n > 0 ? 1 : 0;
   }
-  return hasAny ? out : null;
-};
-var useMemoizedEffectDefinitions = (effects) => {
-  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]);
-  if (isSame) {
-    return previous;
+  static step1(n) {
+    return n >= 1 ? 1 : 0;
   }
-  previousRef.current = definitions;
-  return definitions;
-};
-var getEffectCodeValuesCtx = ({
-  codeValues,
-  nodePath,
-  effectIndex
-}) => {
-  const status = codeValues[makeSequencePropsSubscriptionKey(nodePath)];
-  if (!status) {
-    return { type: "cannot-update-sequence", reason: "not-found" };
+  static linear(t) {
+    return t;
   }
-  if (!status.canUpdate) {
-    return { type: "cannot-update-sequence", reason: status.reason };
+  static ease(t) {
+    return Easing.bezier(0.42, 0, 1, 1)(t);
   }
-  const effect = status.effects.find((e) => e.effectIndex === effectIndex);
-  if (!effect) {
-    return { type: "cannot-update-effect", reason: "not-found" };
+  static quad(t) {
+    return t * t;
   }
-  if (!effect.canUpdate) {
-    return { type: "cannot-update-effect", reason: effect.reason };
+  static cubic(t) {
+    return t * t * t;
   }
-  return { type: "can-update-effect", props: effect.props };
-};
-var getCodeValuesCtx = (codeValues, nodePath) => {
-  const status = codeValues[makeSequencePropsSubscriptionKey(nodePath)];
-  if (!status) {
-    return;
+  static poly(n) {
+    return (t) => t ** n;
   }
-  if (!status.canUpdate) {
-    return;
+  static sin(t) {
+    return 1 - Math.cos(t * Math.PI / 2);
   }
-  return status.props;
-};
-var useMemoizedEffects = ({
-  effects,
-  overrideId
-}) => {
-  const previousRef = useRef5(null);
-  const { codeValues } = useContext15(VisualModeCodeValuesContext);
-  const { getEffectDragOverrides } = useContext15(VisualModeDragOverridesContext);
-  const { overrideIdToNodePathMappings } = useContext15(OverrideIdsToNodePathsGettersContext);
-  const previous = previousRef.current;
-  const nodePath = overrideId ? overrideIdToNodePathMappings[overrideId] ?? null : null;
-  const resolved = effects.map((descriptor, index) => {
-    if (nodePath === null) {
-      return {
-        descriptor,
-        params: descriptor.params,
-        effectKey: descriptor.effectKey
-      };
+  static circle(t) {
+    const u = clampUnit(t);
+    return 1 - Math.sqrt(1 - u * u);
+  }
+  static exp(t) {
+    return 2 ** (10 * (t - 1));
+  }
+  static elastic(bounciness = 1) {
+    const p = bounciness * Math.PI;
+    return (t) => 1 - Math.cos(t * Math.PI / 2) ** 3 * Math.cos(t * p);
+  }
+  static back(s = 1.70158) {
+    return (t) => t * t * ((s + 1) * t - s);
+  }
+  static bounce(t) {
+    const u = clampUnit(t);
+    if (u < 1 / 2.75) {
+      return 7.5625 * u * u;
     }
-    const effectStatus = getEffectCodeValuesCtx({
-      codeValues,
-      nodePath,
-      effectIndex: index
-    });
-    const codeOverrides = effectStatus.type === "can-update-effect" ? extractCodeOverrides(effectStatus.props) : null;
-    const dragOverridesMap = getEffectDragOverrides(nodePath, index);
-    const dragOverrides = Object.keys(dragOverridesMap).length === 0 ? null : dragOverridesMap;
-    const { params, effectKey } = mergeOverrides({
-      descriptor,
-      codeOverrides,
-      dragOverrides
-    });
-    return { descriptor, params, effectKey };
-  });
-  const isSame = previous !== null && previous.length === resolved.length && previous.every((p, i) => p.definition === resolved[i].descriptor.definition && p.effectKey === resolved[i].effectKey);
-  if (isSame) {
-    return previous;
+    if (u < 2 / 2.75) {
+      const t2_ = u - 1.5 / 2.75;
+      return 7.5625 * t2_ * t2_ + 0.75;
+    }
+    if (u < 2.5 / 2.75) {
+      const t2_ = u - 2.25 / 2.75;
+      return 7.5625 * t2_ * t2_ + 0.9375;
+    }
+    const t2 = u - 2.625 / 2.75;
+    return 7.5625 * t2 * t2 + 0.984375;
   }
-  const next = resolved.map(({ descriptor, params, effectKey }) => ({
-    definition: descriptor.definition,
-    effectKey,
-    params,
-    memoized: true
-  }));
-  previousRef.current = next;
-  return next;
-};
-var flattenActiveSchema = (schema, resolve) => {
-  const out = {};
-  for (const key of Object.keys(schema)) {
-    const field = schema[key];
-    if (field.type === "hidden") {
-      continue;
-    } else if (field.type === "enum") {
-      out[key] = field;
-      const current = resolve(key) ?? field.default;
-      const variant = field.variants[current];
-      if (variant) {
-        Object.assign(out, flattenActiveSchema(variant, resolve));
+  static bezier(x1, y1, x2, y2) {
+    return bezier(x1, y1, x2, y2);
+  }
+  static in(easing) {
+    return easing;
+  }
+  static out(easing) {
+    return (t) => 1 - easing(1 - t);
+  }
+  static inOut(easing) {
+    return (t) => {
+      if (t < 0.5) {
+        return easing(t * 2) / 2;
       }
-    } else {
-      out[key] = field;
-    }
+      return 1 - easing((1 - t) * 2) / 2;
+    };
   }
-  return out;
+}
+var normalizeNumber = (value) => {
+  return Math.round(value * 1e6) / 1e6;
+};
+var angleUnits = new Set(["deg", "rad", "grad", "turn"]);
+var lengthUnits = new Set([
+  "%",
+  "cap",
+  "ch",
+  "cm",
+  "cqb",
+  "cqh",
+  "cqi",
+  "cqmax",
+  "cqmin",
+  "cqw",
+  "dvh",
+  "dvw",
+  "em",
+  "ex",
+  "ic",
+  "in",
+  "lh",
+  "lvh",
+  "lvw",
+  "mm",
+  "pc",
+  "pt",
+  "px",
+  "q",
+  "rem",
+  "rlh",
+  "svh",
+  "svw",
+  "vb",
+  "vh",
+  "vi",
+  "vmax",
+  "vmin",
+  "vw"
+]);
+var cssNumberRegex = /^([+-]?(?:\d+\.?\d*|\.\d+))([a-zA-Z%]+)?$/;
+var stringifyNumber = (value) => {
+  return String(normalizeNumber(value));
 };
-var getFlatSchemaWithAllKeys = (schema) => {
-  const out = {};
-  const addKey = (key, field) => {
-    if (key in out) {
-      throw new Error(`Duplicate key "${key}" in schema: discriminated union variants must not share keys`);
+var parseStringInterpolationComponent = (component, value) => {
+  const match = cssNumberRegex.exec(component);
+  if (match === null) {
+    throw new TypeError(`Cannot interpolate "${value}" because "${component}" is not a supported scale, translate, or rotate value`);
+  }
+  const unit = match[2] ?? null;
+  const numberValue = Number(match[1]);
+  if (!Number.isFinite(numberValue)) {
+    throw new TypeError(`Cannot interpolate "${value}" because "${component}" is not finite`);
+  }
+  if (unit === null) {
+    return { kind: "scale", value: numberValue, unit: null };
+  }
+  if (angleUnits.has(unit)) {
+    return { kind: "rotate", value: numberValue, unit };
+  }
+  if (lengthUnits.has(unit)) {
+    return { kind: "translate", value: numberValue, unit };
+  }
+  throw new TypeError(`Cannot interpolate "${value}" because "${unit}" is not a supported translate or rotate unit`);
+};
+var parseStringInterpolationValue = (output) => {
+  if (typeof output === "number") {
+    if (!Number.isFinite(output)) {
+      throw new Error(`outputRange must contain only finite numbers, but got [${output}]`);
     }
-    out[key] = field;
-  };
-  for (const key of Object.keys(schema)) {
-    const field = schema[key];
-    addKey(key, field);
-    if (field.type === "enum") {
-      for (const variant of Object.values(field.variants)) {
-        const flatVariant = getFlatSchemaWithAllKeys(variant);
-        for (const variantKey of Object.keys(flatVariant)) {
-          addKey(variantKey, flatVariant[variantKey]);
-        }
-      }
+    return {
+      kind: "scale",
+      values: [output, output, 1],
+      units: [null, null, null],
+      dimensions: 1
+    };
+  }
+  const parts = output.trim().split(/\s+/);
+  if (parts.length < 1 || parts.length > 3 || parts[0] === "") {
+    throw new TypeError(`String outputRange values must contain 1 to 3 components, but got "${output}"`);
+  }
+  const parsed = parts.map((part) => parseStringInterpolationComponent(part, output));
+  const [{ kind }] = parsed;
+  for (const part of parsed) {
+    if (part.kind !== kind) {
+      throw new TypeError(`Cannot interpolate "${output}" because it mixes ${kind} and ${part.kind} values`);
     }
   }
-  return out;
+  if (kind === "scale") {
+    const x = parsed[0].value;
+    const y = parsed[1]?.value ?? x;
+    const z = parsed[2]?.value ?? 1;
+    return {
+      kind,
+      values: [x, y, z],
+      units: [null, null, null],
+      dimensions: parsed.length
+    };
+  }
+  return {
+    kind,
+    values: [parsed[0].value, parsed[1]?.value ?? 0, parsed[2]?.value ?? 0],
+    units: [parsed[0].unit, parsed[1]?.unit ?? null, parsed[2]?.unit ?? null],
+    dimensions: parsed.length
+  };
 };
-var findPropsToDelete = ({
-  schema,
-  key,
-  value
+var serializeStringInterpolationValue = ({
+  kind,
+  values,
+  units,
+  dimensions
 }) => {
-  const fieldSchema = schema[key];
-  if (!fieldSchema) {
-    throw new Error("Key " + JSON.stringify(key) + " not found in schema");
+  if (kind === "scale") {
+    return values.slice(0, dimensions).map((value) => stringifyNumber(value)).join(" ");
   }
-  if (typeof value !== "string") {
-    throw new Error("Value must be a string, but is " + JSON.stringify(value));
+  return values.slice(0, dimensions).map((value, index) => `${stringifyNumber(value)}${units[index]}`).join(" ");
+};
+function interpolateFunction(input, inputRange, outputRange, options) {
+  const { extrapolateLeft, extrapolateRight, easing } = options;
+  let result = input;
+  const [inputMin, inputMax] = inputRange;
+  const [outputMin, outputMax] = outputRange;
+  if (result < inputMin) {
+    if (extrapolateLeft === "identity") {
+      return result;
+    }
+    if (extrapolateLeft === "clamp") {
+      result = inputMin;
+    } else if (extrapolateLeft === "wrap") {
+      const range = inputMax - inputMin;
+      result = ((result - inputMin) % range + range) % range + inputMin;
+    } else if (extrapolateLeft === "extend") {}
   }
-  if (fieldSchema.type !== "enum") {
-    throw new Error("Key " + JSON.stringify(key) + " is not an enum");
+  if (result > inputMax) {
+    if (extrapolateRight === "identity") {
+      return result;
+    }
+    if (extrapolateRight === "clamp") {
+      result = inputMax;
+    } else if (extrapolateRight === "wrap") {
+      const range = inputMax - inputMin;
+      result = ((result - inputMin) % range + range) % range + inputMin;
+    } else if (extrapolateRight === "extend") {}
   }
-  const currentVariant = fieldSchema.variants[value];
-  if (!currentVariant) {
-    throw new Error("Value for " + JSON.stringify(key) + " must be one of " + Object.keys(fieldSchema.variants).map((v) => JSON.stringify(v)).join(", ") + ", got " + JSON.stringify(value));
+  if (outputMin === outputMax) {
+    return outputMin;
   }
-  const otherVariants = Object.keys(fieldSchema.variants).filter((v) => v !== value);
-  const otherKeys = new Set;
-  for (const variant of otherVariants) {
-    const otherVariant = fieldSchema.variants[variant];
-    const keys = Object.keys(otherVariant);
-    for (const k of keys) {
-      otherKeys.add(k);
+  result = (result - inputMin) / (inputMax - inputMin);
+  result = easing(result);
+  result = result * (outputMax - outputMin) + outputMin;
+  return result;
+}
+function findRange(input, inputRange) {
+  let i;
+  for (i = 1;i < inputRange.length - 1; ++i) {
+    if (inputRange[i] >= input) {
+      break;
     }
   }
-  return [...otherKeys];
-};
-var getEffectiveVisualModeValue = ({
-  codeValue,
-  dragOverrideValue,
-  defaultValue,
-  shouldResortToDefaultValueIfUndefined = false
+  return i - 1;
+}
+var defaultEasing = (num) => num;
+var interpolateNumber = ({
+  input,
+  inputRange,
+  outputRange,
+  options
 }) => {
-  if (dragOverrideValue !== undefined) {
-    return dragOverrideValue;
+  if (inputRange.length === 1) {
+    return outputRange[0];
   }
-  if (codeValue.codeValue === undefined && shouldResortToDefaultValueIfUndefined) {
-    return defaultValue;
+  const easingOption = options?.easing;
+  const resolveEasingForSegment = (segmentIndex) => {
+    if (easingOption === undefined) {
+      return defaultEasing;
+    }
+    if (typeof easingOption === "function") {
+      return easingOption;
+    }
+    return easingOption[segmentIndex];
+  };
+  let extrapolateLeft = "extend";
+  if (options?.extrapolateLeft !== undefined) {
+    extrapolateLeft = options.extrapolateLeft;
   }
-  return codeValue.codeValue;
-};
-var NEWTON_ITERATIONS = 4;
-var NEWTON_MIN_SLOPE = 0.001;
-var SUBDIVISION_PRECISION = 0.0000001;
-var SUBDIVISION_MAX_ITERATIONS = 10;
-var kSplineTableSize = 11;
-var kSampleStepSize = 1 / (kSplineTableSize - 1);
-var float32ArraySupported = typeof Float32Array === "function";
-function a(aA1, aA2) {
-  return 1 - 3 * aA2 + 3 * aA1;
-}
-function b(aA1, aA2) {
-  return 3 * aA2 - 6 * aA1;
-}
-function c(aA1) {
-  return 3 * aA1;
-}
-function calcBezier(aT, aA1, aA2) {
-  return ((a(aA1, aA2) * aT + b(aA1, aA2)) * aT + c(aA1)) * aT;
-}
-function getSlope(aT, aA1, aA2) {
-  return 3 * a(aA1, aA2) * aT * aT + 2 * b(aA1, aA2) * aT + c(aA1);
-}
-function binarySubdivide({
-  aX,
-  _aA,
-  _aB,
-  mX1,
-  mX2
-}) {
-  let currentX;
-  let currentT;
-  let i = 0;
-  let aA = _aA;
-  let aB = _aB;
-  do {
-    currentT = aA + (aB - aA) / 2;
-    currentX = calcBezier(currentT, mX1, mX2) - aX;
-    if (currentX > 0) {
-      aB = currentT;
-    } else {
-      aA = currentT;
-    }
-  } while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS);
-  return currentT;
-}
-function newtonRaphsonIterate(aX, _aGuessT, mX1, mX2) {
-  let aGuessT = _aGuessT;
-  for (let i = 0;i < NEWTON_ITERATIONS; ++i) {
-    const currentSlope = getSlope(aGuessT, mX1, mX2);
-    if (currentSlope === 0) {
-      return aGuessT;
-    }
-    const currentX = calcBezier(aGuessT, mX1, mX2) - aX;
-    aGuessT -= currentX / currentSlope;
-  }
-  return aGuessT;
-}
-function bezier(mX1, mY1, mX2, mY2) {
-  if (!(mX1 >= 0 && mX1 <= 1 && mX2 >= 0 && mX2 <= 1)) {
-    throw new Error("bezier x values must be in [0, 1] range");
-  }
-  const sampleValues = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize);
-  if (mX1 !== mY1 || mX2 !== mY2) {
-    for (let i = 0;i < kSplineTableSize; ++i) {
-      sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
-    }
-  }
-  function getTForX(aX) {
-    let intervalStart = 0;
-    let currentSample = 1;
-    const lastSample = kSplineTableSize - 1;
-    for (;currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) {
-      intervalStart += kSampleStepSize;
-    }
-    --currentSample;
-    const dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]);
-    const guessForT = intervalStart + dist * kSampleStepSize;
-    const initialSlope = getSlope(guessForT, mX1, mX2);
-    if (initialSlope >= NEWTON_MIN_SLOPE) {
-      return newtonRaphsonIterate(aX, guessForT, mX1, mX2);
-    }
-    if (initialSlope === 0) {
-      return guessForT;
-    }
-    return binarySubdivide({
-      aX,
-      _aA: intervalStart,
-      _aB: intervalStart + kSampleStepSize,
-      mX1,
-      mX2
-    });
-  }
-  return function(x) {
-    const clampedX = Math.min(1, Math.max(0, x));
-    if (mX1 === mY1 && mX2 === mY2) {
-      return clampedX;
-    }
-    if (clampedX === 0) {
-      return 0;
-    }
-    if (clampedX === 1) {
-      return 1;
-    }
-    return calcBezier(getTForX(clampedX), mY1, mY2);
-  };
-}
-var clampUnit = (t) => Math.min(1, Math.max(0, t));
-
-class Easing {
-  static step0(n) {
-    return n > 0 ? 1 : 0;
-  }
-  static step1(n) {
-    return n >= 1 ? 1 : 0;
-  }
-  static linear(t) {
-    return t;
-  }
-  static ease(t) {
-    return Easing.bezier(0.42, 0, 1, 1)(t);
-  }
-  static quad(t) {
-    return t * t;
-  }
-  static cubic(t) {
-    return t * t * t;
-  }
-  static poly(n) {
-    return (t) => t ** n;
-  }
-  static sin(t) {
-    return 1 - Math.cos(t * Math.PI / 2);
-  }
-  static circle(t) {
-    const u = clampUnit(t);
-    return 1 - Math.sqrt(1 - u * u);
-  }
-  static exp(t) {
-    return 2 ** (10 * (t - 1));
-  }
-  static elastic(bounciness = 1) {
-    const p = bounciness * Math.PI;
-    return (t) => 1 - Math.cos(t * Math.PI / 2) ** 3 * Math.cos(t * p);
+  let extrapolateRight = "extend";
+  if (options?.extrapolateRight !== undefined) {
+    extrapolateRight = options.extrapolateRight;
   }
-  static back(s = 1.70158) {
-    return (t) => t * t * ((s + 1) * t - s);
+  const posterizedInput = options?.posterize === undefined ? input : Math.floor(input / options.posterize) * options.posterize;
+  const range = findRange(posterizedInput, inputRange);
+  return interpolateFunction(posterizedInput, [inputRange[range], inputRange[range + 1]], [outputRange[range], outputRange[range + 1]], {
+    easing: resolveEasingForSegment(range),
+    extrapolateLeft,
+    extrapolateRight
+  });
+};
+var interpolateString = ({
+  input,
+  inputRange,
+  outputRange,
+  options
+}) => {
+  const parsedOutputRange = outputRange.map(parseStringInterpolationValue);
+  const kind = parsedOutputRange[0]?.kind;
+  if (kind === undefined) {
+    throw new Error("outputRange must have at least 1 element");
   }
-  static bounce(t) {
-    const u = clampUnit(t);
-    if (u < 1 / 2.75) {
-      return 7.5625 * u * u;
-    }
-    if (u < 2 / 2.75) {
-      const t2_ = u - 1.5 / 2.75;
-      return 7.5625 * t2_ * t2_ + 0.75;
-    }
-    if (u < 2.5 / 2.75) {
-      const t2_ = u - 2.25 / 2.75;
-      return 7.5625 * t2_ * t2_ + 0.9375;
+  for (const parsed of parsedOutputRange) {
+    if (parsed.kind !== kind) {
+      throw new TypeError(`Cannot interpolate ${kind} values with ${parsed.kind} values`);
     }
-    const t2 = u - 2.625 / 2.75;
-    return 7.5625 * t2 * t2 + 0.984375;
-  }
-  static bezier(x1, y1, x2, y2) {
-    return bezier(x1, y1, x2, y2);
-  }
-  static in(easing) {
-    return easing;
-  }
-  static out(easing) {
-    return (t) => 1 - easing(1 - t);
   }
-  static inOut(easing) {
-    return (t) => {
-      if (t < 0.5) {
-        return easing(t * 2) / 2;
+  const dimensions = Math.max(...parsedOutputRange.map((parsed) => parsed.dimensions));
+  const units = [
+    null,
+    null,
+    null
+  ];
+  if (kind !== "scale") {
+    for (let axis = 0;axis < dimensions; axis++) {
+      for (const parsed of parsedOutputRange) {
+        const unit = parsed.units[axis];
+        if (unit === null) {
+          continue;
+        }
+        if (units[axis] === null) {
+          units[axis] = unit;
+          continue;
+        }
+        if (units[axis] !== unit) {
+          throw new TypeError(`Cannot interpolate ${kind} values with different units on axis ${axis + 1}: ${units[axis]} and ${unit}`);
+        }
+      }
+      if (units[axis] === null) {
+        throw new TypeError(`Cannot interpolate ${kind} values because axis ${axis + 1} has no unit`);
       }
-      return 1 - easing((1 - t) * 2) / 2;
-    };
-  }
-}
-function interpolateFunction(input, inputRange, outputRange, options) {
-  const { extrapolateLeft, extrapolateRight, easing } = options;
-  let result = input;
-  const [inputMin, inputMax] = inputRange;
-  const [outputMin, outputMax] = outputRange;
-  if (result < inputMin) {
-    if (extrapolateLeft === "identity") {
-      return result;
-    }
-    if (extrapolateLeft === "clamp") {
-      result = inputMin;
-    } else if (extrapolateLeft === "wrap") {
-      const range = inputMax - inputMin;
-      result = ((result - inputMin) % range + range) % range + inputMin;
-    } else if (extrapolateLeft === "extend") {}
-  }
-  if (result > inputMax) {
-    if (extrapolateRight === "identity") {
-      return result;
-    }
-    if (extrapolateRight === "clamp") {
-      result = inputMax;
-    } else if (extrapolateRight === "wrap") {
-      const range = inputMax - inputMin;
-      result = ((result - inputMin) % range + range) % range + inputMin;
-    } else if (extrapolateRight === "extend") {}
-  }
-  if (outputMin === outputMax) {
-    return outputMin;
-  }
-  result = (result - inputMin) / (inputMax - inputMin);
-  result = easing(result);
-  result = result * (outputMax - outputMin) + outputMin;
-  return result;
-}
-function findRange(input, inputRange) {
-  let i;
-  for (i = 1;i < inputRange.length - 1; ++i) {
-    if (inputRange[i] >= input) {
-      break;
     }
   }
-  return i - 1;
-}
+  return serializeStringInterpolationValue({
+    kind,
+    values: [0, 0, 0].map((_, axis) => interpolateNumber({
+      input,
+      inputRange,
+      outputRange: parsedOutputRange.map((parsed) => parsed.values[axis]),
+      options
+    })),
+    units,
+    dimensions
+  });
+};
 function checkValidInputRange(arr) {
   for (let i = 1;i < arr.length; ++i) {
     if (!(arr[i] > arr[i - 1])) {
@@ -8227,42 +8298,27 @@ function interpolate2(input, inputRange, outputRange, options) {
     throw new Error("inputRange (" + inputRange.length + ") and outputRange (" + outputRange.length + ") must have the same length");
   }
   checkInfiniteRange("inputRange", inputRange);
-  checkInfiniteRange("outputRange", outputRange);
   checkValidInputRange(inputRange);
   assertValidInterpolateEasingOption(options?.easing, inputRange.length);
   assertValidInterpolatePosterizeOption(options?.posterize);
-  const easingOption = options?.easing;
-  const defaultEasing = (num) => num;
-  const resolveEasingForSegment = (segmentIndex) => {
-    if (easingOption === undefined) {
-      return defaultEasing;
-    }
-    if (typeof easingOption === "function") {
-      return easingOption;
-    }
-    return easingOption[segmentIndex];
-  };
-  let extrapolateLeft = "extend";
-  if (options?.extrapolateLeft !== undefined) {
-    extrapolateLeft = options.extrapolateLeft;
-  }
-  let extrapolateRight = "extend";
-  if (options?.extrapolateRight !== undefined) {
-    extrapolateRight = options.extrapolateRight;
-  }
   if (typeof input !== "number") {
     throw new TypeError("Cannot interpolate an input which is not a number");
   }
-  if (inputRange.length === 1) {
-    return outputRange[0];
+  if (!Array.isArray(outputRange)) {
+    throw new Error("outputRange must contain only numbers");
   }
-  const posterizedInput = options?.posterize === undefined ? input : Math.floor(input / options.posterize) * options.posterize;
-  const range = findRange(posterizedInput, inputRange);
-  return interpolateFunction(posterizedInput, [inputRange[range], inputRange[range + 1]], [outputRange[range], outputRange[range + 1]], {
-    easing: resolveEasingForSegment(range),
-    extrapolateLeft,
-    extrapolateRight
-  });
+  const hasStringOutput = outputRange.some((output) => typeof output === "string");
+  if (hasStringOutput) {
+    if (!outputRange.every((output) => typeof output === "string" || typeof output === "number")) {
+      throw new TypeError("outputRange must contain only numbers, or supported scale, translate, and rotate strings");
+    }
+    return interpolateString({ input, inputRange, outputRange, options });
+  }
+  if (!outputRange.every((output) => typeof output === "number")) {
+    throw new TypeError("outputRange must contain only numbers, or supported scale, translate, and rotate strings");
+  }
+  checkInfiniteRange("outputRange", outputRange);
+  return interpolateNumber({ input, inputRange, outputRange, options });
 }
 var NUMBER = "[-+]?\\d*\\.?\\d+";
 var PERCENTAGE = NUMBER + "%";
@@ -8738,76 +8794,370 @@ var interpolateColorsRGB = (value, inputRange, colors, options) => {
     if (f === opacity) {
       return Number(unrounded.toFixed(3));
     }
-    return Math.round(unrounded);
-  });
-  return rgbaColor(r2, g, b2, a2);
+    return Math.round(unrounded);
+  });
+  return rgbaColor(r2, g, b2, a2);
+};
+var interpolateColors = (input, inputRange, outputRange, options) => {
+  if (typeof input === "undefined") {
+    throw new TypeError("input can not be undefined");
+  }
+  if (typeof inputRange === "undefined") {
+    throw new TypeError("inputRange can not be undefined");
+  }
+  if (typeof outputRange === "undefined") {
+    throw new TypeError("outputRange can not be undefined");
+  }
+  if (inputRange.length !== outputRange.length) {
+    throw new TypeError("inputRange (" + inputRange.length + " values provided) and outputRange (" + outputRange.length + " values provided) must have the same length");
+  }
+  const processedOutputRange = outputRange.map((c2) => processColor(c2));
+  return interpolateColorsRGB(input, inputRange, processedOutputRange, options);
+};
+var easingToFn = (e) => {
+  if (e === "linear") {
+    return Easing.linear;
+  }
+  return bezier(e[0], e[1], e[2], e[3]);
+};
+var interpolateKeyframedStatus = ({
+  frame,
+  status
+}) => {
+  const { keyframes, easing, clamping, interpolationFunction } = status;
+  if (keyframes.length === 0) {
+    return null;
+  }
+  const inputRange = keyframes.map((k) => k.frame);
+  const outputs = keyframes.map((k) => k.value);
+  if (interpolationFunction === "interpolateColors") {
+    if (!outputs.every((v) => typeof v === "string")) {
+      return null;
+    }
+    if (keyframes.length === 1) {
+      return outputs[0];
+    }
+    try {
+      return interpolateColors(frame, inputRange, outputs, {
+        posterize: status.posterize
+      });
+    } catch {
+      return null;
+    }
+  }
+  if (interpolationFunction !== "interpolate") {
+    return null;
+  }
+  try {
+    return interpolate2(frame, inputRange, outputs, {
+      easing: easing.map(easingToFn),
+      extrapolateLeft: clamping.left,
+      extrapolateRight: clamping.right,
+      posterize: status.posterize
+    });
+  } catch {
+    return null;
+  }
+};
+var resolveDragOverrideValue = ({
+  dragOverrideValue,
+  frame
+}) => {
+  if (dragOverrideValue === undefined) {
+    return { type: "none" };
+  }
+  if (dragOverrideValue.type === "static") {
+    return { type: "resolved", value: dragOverrideValue.value };
+  }
+  if (frame === null) {
+    return { type: "none" };
+  }
+  const interpolated = interpolateKeyframedStatus({
+    frame,
+    status: dragOverrideValue.status
+  });
+  if (interpolated === null) {
+    return { type: "none" };
+  }
+  return { type: "resolved", value: interpolated };
+};
+var getEffectiveVisualModeValue = ({
+  codeValue,
+  dragOverrideValue,
+  defaultValue,
+  frame = null,
+  shouldResortToDefaultValueIfUndefined = false
+}) => {
+  const dragOverride = resolveDragOverrideValue({
+    dragOverrideValue,
+    frame
+  });
+  if (dragOverride.type === "resolved" && dragOverride.value !== undefined) {
+    return dragOverride.value;
+  }
+  if (codeValue.status === "keyframed" && frame !== null) {
+    return interpolateKeyframedStatus({
+      frame,
+      status: codeValue
+    });
+  }
+  if (codeValue.codeValue === undefined && shouldResortToDefaultValueIfUndefined) {
+    return defaultValue;
+  }
+  return codeValue.codeValue;
+};
+var OverrideIdsToNodePathsGettersContext = createContext16({
+  overrideIdToNodePathMappings: {}
+});
+var OverrideIdsToNodePathsSettersContext = createContext16({
+  setOverrideIdToNodePath: () => {
+    throw new Error("OverrideIdsToNodePathsSettersContext not initialized");
+  }
+});
+var mergeOverrides = ({
+  descriptor,
+  codeOverrides,
+  dragOverrides,
+  frame
+}) => {
+  if (!codeOverrides && !dragOverrides) {
+    return { params: descriptor.params, effectKey: descriptor.effectKey };
+  }
+  const merged = {
+    ...descriptor.params
+  };
+  if (codeOverrides) {
+    for (const [key, value] of Object.entries(codeOverrides)) {
+      if (value !== undefined) {
+        merged[key] = value;
+      }
+    }
+  }
+  if (dragOverrides) {
+    for (const [key, value] of Object.entries(dragOverrides)) {
+      const resolved = resolveDragOverrideValue({
+        dragOverrideValue: value,
+        frame
+      });
+      if (resolved.type === "resolved") {
+        merged[key] = resolved.value;
+      }
+    }
+  }
+  return {
+    params: merged,
+    effectKey: descriptor.definition.calculateKey(merged)
+  };
+};
+var extractCodeOverrides = (propStatus) => {
+  if (!propStatus) {
+    return null;
+  }
+  const out = {};
+  let hasAny = false;
+  for (const [key, status] of Object.entries(propStatus)) {
+    if (status.status !== "computed") {
+      out[key] = status.codeValue;
+      hasAny = true;
+    }
+  }
+  return hasAny ? out : null;
+};
+var useMemoizedEffectDefinitions = (effects) => {
+  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]);
+  if (isSame) {
+    return previous;
+  }
+  previousRef.current = definitions;
+  return definitions;
+};
+var getEffectCodeValuesCtx = ({
+  codeValues,
+  nodePath,
+  effectIndex
+}) => {
+  const status = codeValues[makeSequencePropsSubscriptionKey(nodePath)];
+  if (!status) {
+    return { type: "cannot-update-sequence", reason: "not-found" };
+  }
+  if (!status.canUpdate) {
+    return { type: "cannot-update-sequence", reason: status.reason };
+  }
+  const effect = status.effects.find((e) => e.effectIndex === effectIndex);
+  if (!effect) {
+    return { type: "cannot-update-effect", reason: "not-found" };
+  }
+  if (!effect.canUpdate) {
+    return { type: "cannot-update-effect", reason: effect.reason };
+  }
+  return { type: "can-update-effect", props: effect.props };
+};
+var getCodeValuesCtx = (codeValues, nodePath) => {
+  const status = codeValues[makeSequencePropsSubscriptionKey(nodePath)];
+  if (!status) {
+    return;
+  }
+  if (!status.canUpdate) {
+    return;
+  }
+  return status.props;
+};
+var useMemoizedEffects = ({
+  effects,
+  overrideId
+}) => {
+  const previousRef = useRef5(null);
+  const { codeValues } = useContext15(VisualModeCodeValuesContext);
+  const { getEffectDragOverrides } = useContext15(VisualModeDragOverridesContext);
+  const frame = useCurrentFrame();
+  const { overrideIdToNodePathMappings } = useContext15(OverrideIdsToNodePathsGettersContext);
+  const previous = previousRef.current;
+  const nodePath = overrideId ? overrideIdToNodePathMappings[overrideId] ?? null : null;
+  const resolved = effects.map((descriptor, index) => {
+    if (nodePath === null) {
+      return {
+        descriptor,
+        params: descriptor.params,
+        effectKey: descriptor.effectKey
+      };
+    }
+    const effectStatus = getEffectCodeValuesCtx({
+      codeValues,
+      nodePath,
+      effectIndex: index
+    });
+    const codeOverrides = effectStatus.type === "can-update-effect" ? extractCodeOverrides(effectStatus.props) : null;
+    const dragOverridesMap = getEffectDragOverrides(nodePath, index);
+    const dragOverrides = Object.keys(dragOverridesMap).length === 0 ? null : dragOverridesMap;
+    const { params, effectKey } = mergeOverrides({
+      descriptor,
+      codeOverrides,
+      dragOverrides,
+      frame
+    });
+    return { descriptor, params, effectKey };
+  });
+  const isSame = previous !== null && previous.length === resolved.length && previous.every((p, i) => p.definition === resolved[i].descriptor.definition && p.effectKey === resolved[i].effectKey);
+  if (isSame) {
+    return previous;
+  }
+  const next = resolved.map(({ descriptor, params, effectKey }) => ({
+    definition: descriptor.definition,
+    effectKey,
+    params,
+    memoized: true
+  }));
+  previousRef.current = next;
+  return next;
+};
+var flattenActiveSchema = (schema, resolve) => {
+  const out = {};
+  for (const key of Object.keys(schema)) {
+    const field = schema[key];
+    if (field.type === "hidden") {
+      continue;
+    } else if (field.type === "enum") {
+      out[key] = field;
+      const current = resolve(key) ?? field.default;
+      const variant = field.variants[current];
+      if (variant) {
+        Object.assign(out, flattenActiveSchema(variant, resolve));
+      }
+    } else {
+      out[key] = field;
+    }
+  }
+  return out;
+};
+var getFlatSchemaWithAllKeys = (schema) => {
+  const out = {};
+  const addKey = (key, field) => {
+    if (key in out) {
+      throw new Error(`Duplicate key "${key}" in schema: discriminated union variants must not share keys`);
+    }
+    out[key] = field;
+  };
+  for (const key of Object.keys(schema)) {
+    const field = schema[key];
+    addKey(key, field);
+    if (field.type === "enum") {
+      for (const variant of Object.values(field.variants)) {
+        const flatVariant = getFlatSchemaWithAllKeys(variant);
+        for (const variantKey of Object.keys(flatVariant)) {
+          addKey(variantKey, flatVariant[variantKey]);
+        }
+      }
+    }
+  }
+  return out;
 };
-var interpolateColors = (input, inputRange, outputRange, options) => {
-  if (typeof input === "undefined") {
-    throw new TypeError("input can not be undefined");
+var findPropsToDelete = ({
+  schema,
+  key,
+  value
+}) => {
+  const fieldSchema = schema[key];
+  if (!fieldSchema) {
+    throw new Error("Key " + JSON.stringify(key) + " not found in schema");
   }
-  if (typeof inputRange === "undefined") {
-    throw new TypeError("inputRange can not be undefined");
+  if (typeof value !== "string") {
+    throw new Error("Value must be a string, but is " + JSON.stringify(value));
   }
-  if (typeof outputRange === "undefined") {
-    throw new TypeError("outputRange can not be undefined");
+  if (fieldSchema.type !== "enum") {
+    throw new Error("Key " + JSON.stringify(key) + " is not an enum");
   }
-  if (inputRange.length !== outputRange.length) {
-    throw new TypeError("inputRange (" + inputRange.length + " values provided) and outputRange (" + outputRange.length + " values provided) must have the same length");
+  const currentVariant = fieldSchema.variants[value];
+  if (!currentVariant) {
+    throw new Error("Value for " + JSON.stringify(key) + " must be one of " + Object.keys(fieldSchema.variants).map((v) => JSON.stringify(v)).join(", ") + ", got " + JSON.stringify(value));
   }
-  const processedOutputRange = outputRange.map((c2) => processColor(c2));
-  return interpolateColorsRGB(input, inputRange, processedOutputRange, options);
-};
-var easingToFn = (e) => {
-  if (e === "linear") {
-    return Easing.linear;
+  const otherVariants = Object.keys(fieldSchema.variants).filter((v) => v !== value);
+  const otherKeys = new Set;
+  for (const variant of otherVariants) {
+    const otherVariant = fieldSchema.variants[variant];
+    const keys = Object.keys(otherVariant);
+    for (const k of keys) {
+      otherKeys.add(k);
+    }
   }
-  return bezier(e[0], e[1], e[2], e[3]);
+  return [...otherKeys];
 };
-var interpolateKeyframedStatus = ({
+var makeStaticDragOverride = (value) => {
+  return { type: "static", value };
+};
+var makeKeyframedDragOverride = ({
+  status,
   frame,
-  status
+  value
 }) => {
-  const { keyframes, easing, clamping, interpolationFunction } = status;
-  if (keyframes.length === 0) {
-    return null;
-  }
-  const inputRange = keyframes.map((k) => k.frame);
-  const outputs = keyframes.map((k) => k.value);
-  if (interpolationFunction === "interpolateColors") {
-    if (!outputs.every((v) => typeof v === "string")) {
-      return null;
-    }
-    if (keyframes.length === 1) {
-      return outputs[0];
-    }
-    try {
-      return interpolateColors(frame, inputRange, outputs, {
-        posterize: status.posterize
-      });
-    } catch {
-      return null;
-    }
-  }
-  if (interpolationFunction !== "interpolate") {
-    return null;
-  }
-  if (!outputs.every((v) => typeof v === "number")) {
-    return null;
+  const existingIndex = status.keyframes.findIndex((keyframe) => keyframe.frame === frame);
+  const keyframes = existingIndex === -1 ? [...status.keyframes, { frame, value }].sort((first, second) => first.frame - second.frame) : status.keyframes.map((keyframe, index) => index === existingIndex ? { frame, value } : keyframe);
+  const easing = [...status.easing];
+  while (easing.length < keyframes.length - 1) {
+    easing.push("linear");
   }
-  if (keyframes.length === 1) {
-    return outputs[0];
+  if (easing.length > keyframes.length - 1) {
+    easing.length = keyframes.length - 1;
   }
-  try {
-    return interpolate2(frame, inputRange, outputs, {
-      easing: easing.map(easingToFn),
-      extrapolateLeft: clamping.left,
-      extrapolateRight: clamping.right,
-      posterize: status.posterize
-    });
-  } catch {
-    return null;
+  return {
+    type: "keyframed",
+    status: {
+      ...status,
+      keyframes,
+      easing
+    }
+  };
+};
+var getStaticDragOverrideValue = (dragOverrideValue) => {
+  if (dragOverrideValue?.type !== "static") {
+    return;
   }
+  return dragOverrideValue.value;
+};
+var isKeyframedStatus = (status) => {
+  return status !== null && status.status === "keyframed";
 };
 var findFieldInSchema = (schema, key) => {
   if (key in schema) {
@@ -8844,21 +9194,34 @@ var computeEffectiveSchemaValuesDotNotation = ({
     let value;
     if (codeValueStatus === null) {
       value = currentValue[key];
-    } else if (codeValueStatus.canUpdate === false) {
-      if (codeValueStatus.reason === "keyframed" && frame !== null) {
-        const interpolated = interpolateKeyframedStatus({
-          frame,
-          status: codeValueStatus
-        });
-        value = interpolated ?? currentValue[key];
-      } else {
+    } else if (isKeyframedStatus(codeValueStatus)) {
+      if (field?.type === "array" || field?.keyframable === false) {
         value = currentValue[key];
+      } else {
+        const dragOverride = resolveDragOverrideValue({
+          dragOverrideValue: overrideValues[key],
+          frame
+        });
+        if (dragOverride.type === "resolved") {
+          value = dragOverride.value;
+        } else if (frame !== null) {
+          const interpolated = interpolateKeyframedStatus({
+            frame,
+            status: codeValueStatus
+          });
+          value = interpolated ?? currentValue[key];
+        } else {
+          value = currentValue[key];
+        }
       }
+    } else if (codeValueStatus.status === "computed") {
+      value = currentValue[key];
     } else {
       value = getEffectiveVisualModeValue({
         codeValue: codeValueStatus,
         dragOverrideValue: overrideValues[key],
         defaultValue: field?.default,
+        frame,
         shouldResortToDefaultValueIfUndefined: false
       });
     }
@@ -8931,13 +9294,17 @@ var mergeValues = ({
   return merged;
 };
 var stackToOverrideMap = {};
-var wrapInSchema = (Component, schema) => {
+var wrapInSchema = ({
+  Component,
+  schema,
+  supportsEffects
+}) => {
   const flatSchema = getFlatSchemaWithAllKeys(schema);
   const flatKeys = Object.keys(flatSchema);
   const Wrapped = forwardRef2((props, ref) => {
     const env = useRemotionEnvironment();
     if (!env.isStudio || env.isReadOnlyStudio || env.isRendering) {
-      return React12.createElement(Component, {
+      return React13.createElement(Component, {
         ...props,
         _experimentalControls: null,
         ref
@@ -8948,7 +9315,7 @@ var wrapInSchema = (Component, schema) => {
     const nodePathMapping = useContext16(OverrideIdsToNodePathsGettersContext);
     const frame = useCurrentFrame();
     if (props._experimentalControls) {
-      return React12.createElement(Component, {
+      return React13.createElement(Component, {
         ...props,
         ref
       });
@@ -8973,7 +9340,8 @@ var wrapInSchema = (Component, schema) => {
       return {
         schema,
         currentRuntimeValueDotNotation,
-        overrideId
+        overrideId,
+        supportsEffects
       };
     }, [currentRuntimeValueDotNotation, overrideId]);
     const { merged: valuesDotNotation, propsToDelete } = useMemo13(() => {
@@ -8998,7 +9366,7 @@ var wrapInSchema = (Component, schema) => {
       schemaKeys: activeKeys,
       propsToDelete
     });
-    return React12.createElement(Component, {
+    return React13.createElement(Component, {
       ...mergedProps,
       _experimentalControls: controls,
       ref
@@ -9007,6 +9375,7 @@ var wrapInSchema = (Component, schema) => {
   Wrapped.displayName = `wrapInSchema(${Component.displayName || Component.name || "Component"})`;
   return Wrapped;
 };
+var EMPTY_EFFECTS = [];
 var RegularSequenceRefForwardingFunction = ({
   from = 0,
   durationInFrames = Infinity,
@@ -9101,6 +9470,7 @@ var RegularSequenceRefForwardingFunction = ({
   }, [name]);
   const resolvedDocumentationLink = documentationLink ?? (name === undefined ? "https://www.remotion.dev/docs/sequence" : null);
   const env = useRemotionEnvironment();
+  const isInsideSeries = useContext17(IsInsideSeriesContext);
   const inheritedStack = other?.stack ?? null;
   const stackRef = useRef6(null);
   stackRef.current = stack ?? inheritedStack;
@@ -9113,7 +9483,7 @@ var RegularSequenceRefForwardingFunction = ({
         registerSequence({
           type: "image",
           controls: controls ?? null,
-          effects: _remotionInternalEffects ?? [],
+          effects: _remotionInternalEffects ?? EMPTY_EFFECTS,
           displayName: timelineClipName,
           documentationLink: resolvedDocumentationLink,
           duration: actualDurationInFrames,
@@ -9128,13 +9498,14 @@ var RegularSequenceRefForwardingFunction = ({
           showInTimeline,
           src: isMedia.src,
           getStack: () => stackRef.current,
-          refForOutline: refForOutline ?? null
+          refForOutline: refForOutline ?? null,
+          isInsideSeries
         });
       } else {
         registerSequence({
           type: isMedia.type,
           controls: controls ?? null,
-          effects: _remotionInternalEffects ?? [],
+          effects: _remotionInternalEffects ?? EMPTY_EFFECTS,
           displayName: timelineClipName,
           documentationLink: resolvedDocumentationLink,
           doesVolumeChange: isMedia.data.doesVolumeChange,
@@ -9153,7 +9524,8 @@ var RegularSequenceRefForwardingFunction = ({
           getStack: () => stackRef.current,
           startMediaFrom: isMedia.data.startMediaFrom,
           volume: isMedia.data.volumes,
-          refForOutline: refForOutline ?? null
+          refForOutline: refForOutline ?? null,
+          isInsideSeries
         });
       }
       return () => {
@@ -9176,8 +9548,9 @@ var RegularSequenceRefForwardingFunction = ({
       premountDisplay: premountDisplay ?? null,
       postmountDisplay: postmountDisplay ?? null,
       controls: controls ?? null,
-      effects: _remotionInternalEffects ?? [],
-      refForOutline: refForOutline ?? null
+      effects: _remotionInternalEffects ?? EMPTY_EFFECTS,
+      refForOutline: refForOutline ?? null,
+      isInsideSeries
     });
     return () => {
       unregisterSequence(id);
@@ -9203,7 +9576,8 @@ var RegularSequenceRefForwardingFunction = ({
     _remotionInternalEffects,
     isMedia,
     resolvedDocumentationLink,
-    refForOutline
+    refForOutline,
+    isInsideSeries
   ]);
   const endThreshold = Math.ceil(cumulatedFrom + from + durationInFrames - 1);
   const content = absoluteFrame < cumulatedFrom + from ? null : absoluteFrame > endThreshold ? null : children;
@@ -9222,9 +9596,9 @@ var RegularSequenceRefForwardingFunction = ({
   if (hidden) {
     return null;
   }
-  return /* @__PURE__ */ jsx112(SequenceContext.Provider, {
+  return /* @__PURE__ */ jsx12(SequenceContext.Provider, {
     value: contextValue,
-    children: content === null ? null : other.layout === "none" ? content : /* @__PURE__ */ jsx112(AbsoluteFill, {
+    children: content === null ? null : other.layout === "none" ? content : /* @__PURE__ */ jsx12(AbsoluteFill, {
       ref,
       style: defaultStyle,
       className: other.className,
@@ -9269,10 +9643,10 @@ var PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
     styleWhilePremounted,
     styleWhilePostmounted
   ]);
-  return /* @__PURE__ */ jsx112(Freeze, {
+  return /* @__PURE__ */ jsx12(Freeze, {
     frame: freezeFrame,
     active: isFreezingActive,
-    children: /* @__PURE__ */ jsx112(SequenceInner, {
+    children: /* @__PURE__ */ jsx12(SequenceInner, {
       ref,
       from,
       durationInFrames,
@@ -9292,20 +9666,24 @@ 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__ */ jsx112(PremountedPostmountedSequence, {
+      return /* @__PURE__ */ jsx12(PremountedPostmountedSequence, {
         ref,
         ...props,
         premountFor: effectivePremountFor
       });
     }
   }
-  return /* @__PURE__ */ jsx112(RegularSequence, {
+  return /* @__PURE__ */ jsx12(RegularSequence, {
     ...props,
     ref
   });
 };
 var SequenceInner = forwardRef3(SequenceRefForwardingFunction);
-var Sequence = wrapInSchema(SequenceInner, sequenceSchema);
+var Sequence = wrapInSchema({
+  Component: SequenceInner,
+  schema: sequenceSchema,
+  supportsEffects: false
+});
 var calculateImageFit = (fit, imageSize, canvasSize) => {
   switch (fit) {
     case "fill": {
@@ -9672,13 +10050,13 @@ var CanvasRefForwardingFunction = ({ width, height, fit, className, style, effec
       }
     };
   }, [draw]);
-  return /* @__PURE__ */ jsx12("canvas", {
+  return /* @__PURE__ */ jsx13("canvas", {
     ref: canvasRef,
     className,
     style
   });
 };
-var Canvas = React14.forwardRef(CanvasRefForwardingFunction);
+var Canvas = React15.forwardRef(CanvasRefForwardingFunction);
 var CACHE_SIZE = 5;
 var getActualTime = ({
   loopBehavior,
@@ -9690,13 +10068,14 @@ var getActualTime = ({
 var decodeImage = async ({
   resolvedSrc,
   signal,
+  requestInit,
   currentTime,
   initialLoopBehavior
 }) => {
   if (typeof ImageDecoder === "undefined") {
     throw new Error("Your browser does not support the WebCodecs ImageDecoder API.");
   }
-  const res = await fetch(resolvedSrc, { signal });
+  const res = await fetch(resolvedSrc, { ...requestInit, signal });
   const { body } = res;
   if (!body) {
     throw new Error("Got no body");
@@ -9819,6 +10198,18 @@ var decodeImage = async ({
     frameCount: selectedTrack.frameCount
   };
 };
+var serializeRequestInit = (requestInit) => {
+  if (!requestInit) {
+    return null;
+  }
+  const requestInitWithoutSignal = { ...requestInit };
+  delete requestInitWithoutSignal.signal;
+  const { headers, ...rest } = requestInitWithoutSignal;
+  return JSON.stringify({
+    ...rest,
+    headers: headers ? Array.from(new Headers(headers).entries()) : null
+  });
+};
 var resolveAnimatedImageSource = (src) => {
   if (typeof window === "undefined") {
     return src;
@@ -9826,13 +10217,17 @@ var resolveAnimatedImageSource = (src) => {
   return new URL(src, window.origin).href;
 };
 var animatedImageSchema = {
+  durationInFrames: durationInFramesField,
+  from: fromField,
   playbackRate: {
     type: "number",
     min: 0,
     max: 10,
     step: 0.1,
     default: 1,
-    description: "Playback Rate"
+    description: "Playback Rate",
+    hiddenFromList: false,
+    keyframable: false
   },
   ...sequenceVisualStyleSchema,
   hidden: hiddenField
@@ -9845,6 +10240,7 @@ var AnimatedImageContent = forwardRef4(({
   loopBehavior = "loop",
   playbackRate = 1,
   fit = "fill",
+  requestInit,
   effects,
   controls,
   ...props
@@ -9858,6 +10254,9 @@ var AnimatedImageContent = forwardRef4(({
   const currentTime = frame / playbackRate / fps;
   const currentTimeRef = useRef9(currentTime);
   currentTimeRef.current = currentTime;
+  const requestInitKey = serializeRequestInit(requestInit);
+  const requestInitRef = useRef9(requestInit);
+  requestInitRef.current = requestInit;
   const ref = useRef9(null);
   const memoizedEffects = useMemoizedEffects({
     effects,
@@ -9876,6 +10275,7 @@ var AnimatedImageContent = forwardRef4(({
     decodeImage({
       resolvedSrc,
       signal: controller.signal,
+      requestInit: requestInitRef.current,
       currentTime: currentTimeRef.current,
       initialLoopBehavior
     }).then((d) => {
@@ -9900,6 +10300,7 @@ var AnimatedImageContent = forwardRef4(({
     resolvedSrc,
     decodeHandle,
     onError,
+    requestInitKey,
     initialLoopBehavior,
     continueRender2
   ]);
@@ -9950,7 +10351,7 @@ var AnimatedImageContent = forwardRef4(({
     width,
     height
   ]);
-  return /* @__PURE__ */ jsx13(Canvas, {
+  return /* @__PURE__ */ jsx14(Canvas, {
     ref,
     width,
     height,
@@ -9972,6 +10373,7 @@ var AnimatedImageInner = ({
   className,
   style,
   durationInFrames,
+  requestInit,
   effects = [],
   _experimentalControls: controls,
   ref,
@@ -9979,7 +10381,11 @@ var AnimatedImageInner = ({
 }) => {
   const { durationInFrames: videoDuration } = useVideoConfig();
   const resolvedDuration = durationInFrames ?? videoDuration;
+  const actualRef = useRef9(null);
   const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
+  useImperativeHandle2(ref, () => {
+    return actualRef.current;
+  }, []);
   const animatedImageProps = {
     src,
     width,
@@ -9990,9 +10396,10 @@ var AnimatedImageInner = ({
     loopBehavior,
     id,
     className,
-    style
+    style,
+    requestInit
   };
-  return /* @__PURE__ */ jsx13(Sequence, {
+  return /* @__PURE__ */ jsx14(Sequence, {
     layout: "none",
     durationInFrames: resolvedDuration,
     name: "<AnimatedImage>",
@@ -10000,15 +10407,20 @@ var AnimatedImageInner = ({
     _experimentalControls: controls,
     _remotionInternalEffects: memoizedEffectDefinitions,
     ...sequenceProps,
-    children: /* @__PURE__ */ jsx13(AnimatedImageContent, {
+    _remotionInternalRefForOutline: actualRef,
+    children: /* @__PURE__ */ jsx14(AnimatedImageContent, {
       ...animatedImageProps,
-      ref,
+      ref: actualRef,
       effects,
       controls
     })
   });
 };
-var AnimatedImage = wrapInSchema(AnimatedImageInner, animatedImageSchema);
+var AnimatedImage = wrapInSchema({
+  Component: AnimatedImageInner,
+  schema: animatedImageSchema,
+  supportsEffects: true
+});
 AnimatedImage.displayName = "AnimatedImage";
 addSequenceStackTraces(AnimatedImage);
 var validateArtifactFilename = (filename) => {
@@ -10040,7 +10452,7 @@ var validateRenderAsset = (artifact) => {
   }
   validateContent(artifact.content);
 };
-var RenderAssetManager = createContext16({
+var RenderAssetManager = createContext17({
   registerRenderAsset: () => {
     return;
   },
@@ -10090,7 +10502,7 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
       renderAssets
     };
   }, [renderAssets, registerRenderAsset, unregisterRenderAsset]);
-  return /* @__PURE__ */ jsx14(RenderAssetManager.Provider, {
+  return /* @__PURE__ */ jsx15(RenderAssetManager.Provider, {
     value: contextValue,
     children
   });
@@ -10178,9 +10590,9 @@ var calculateMediaDuration = ({
   const actualDuration = duration / playbackRate;
   return Math.floor(actualDuration);
 };
-var LoopContext = createContext17(null);
+var LoopContext = createContext18(null);
 var useLoop = () => {
-  return React15.useContext(LoopContext);
+  return React16.useContext(LoopContext);
 };
 var Loop = ({
   durationInFrames,
@@ -10225,9 +10637,9 @@ var Loop = ({
       durationInFrames
     };
   }, [currentFrame, durationInFrames]);
-  return /* @__PURE__ */ jsx15(LoopContext.Provider, {
+  return /* @__PURE__ */ jsx16(LoopContext.Provider, {
     value: loopContext,
-    children: /* @__PURE__ */ jsx15(Sequence, {
+    children: /* @__PURE__ */ jsx16(Sequence, {
       durationInFrames,
       from,
       name: name ?? "<Loop>",
@@ -10250,7 +10662,7 @@ var playbackLogging = ({
   const tags = [mountTime ? Date.now() - mountTime + "ms " : null, tag].filter(Boolean).join(" ");
   Log.trace({ logLevel, tag: null }, `[${tags}]`, message);
 };
-var PreloadContext = createContext18({});
+var PreloadContext = createContext19({});
 var preloads = {};
 var updaters = [];
 var setPreloads = (updater) => {
@@ -10268,7 +10680,7 @@ var PrefetchProvider = ({ children }) => {
       updaters = updaters.filter((u) => u !== updaterFunction);
     };
   }, []);
-  return /* @__PURE__ */ jsx16(PreloadContext.Provider, {
+  return /* @__PURE__ */ jsx17(PreloadContext.Provider, {
     value: _preloads,
     children
   });
@@ -10574,7 +10986,7 @@ var durationReducer = (state, action) => {
       return state;
   }
 };
-var DurationsContext = createContext19({
+var DurationsContext = createContext20({
   durations: {},
   setDurations: () => {
     throw new Error("context missing");
@@ -10588,7 +11000,7 @@ var DurationsContextProvider = ({ children }) => {
       setDurations
     };
   }, [durations]);
-  return /* @__PURE__ */ jsx17(DurationsContext.Provider, {
+  return /* @__PURE__ */ jsx18(DurationsContext.Provider, {
     value,
     children
   });
@@ -10827,8 +11239,8 @@ var didPropChange = (key, newProp, prevProp) => {
   }
   return true;
 };
-var SharedAudioContext = createContext20(null);
-var SharedAudioTagsContext = createContext20(null);
+var SharedAudioContext = createContext21(null);
+var SharedAudioTagsContext = createContext21(null);
 var shouldSaveForLater = (state) => {
   if (state === "suspended" || state === "running-to-suspended" || state === "interrupted") {
     return true;
@@ -10991,7 +11403,7 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled, pr
     getIsResumingAudioContext,
     unscheduleAudioNode
   ]);
-  return /* @__PURE__ */ jsx18(SharedAudioContext.Provider, {
+  return /* @__PURE__ */ jsx19(SharedAudioContext.Provider, {
     value: audioContextValue,
     children
   });
@@ -11021,7 +11433,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
       };
     });
   }, [audioContext, numberOfAudioTags]);
-  const effectToUse = React18.useInsertionEffect ?? React18.useLayoutEffect;
+  const effectToUse = React19.useInsertionEffect ?? React19.useLayoutEffect;
   effectToUse(() => {
     return () => {
       requestAnimationFrame(() => {
@@ -11164,7 +11576,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     value: audioTagsValue,
     children: [
       refs.map(({ id, ref }) => {
-        return /* @__PURE__ */ jsx18("audio", {
+        return /* @__PURE__ */ jsx19("audio", {
           ref,
           preload: "metadata",
           src: EMPTY_AUDIO
@@ -11186,7 +11598,7 @@ var useSharedAudio = ({
     if (tagsCtx && tagsCtx.numberOfAudioTags > 0) {
       return tagsCtx.registerAudio({ aud, audioId, premounting, postmounting });
     }
-    const el = React18.createRef();
+    const el = React19.createRef();
     const mediaElementSourceNode = audioCtx?.audioContext ? makeSharedElementSourceNode({
       audioContext: audioCtx.audioContext,
       ref: el
@@ -11205,7 +11617,7 @@ var useSharedAudio = ({
       }
     };
   });
-  const effectToUse = React18.useInsertionEffect ?? React18.useLayoutEffect;
+  const effectToUse = React19.useInsertionEffect ?? React19.useLayoutEffect;
   if (typeof document !== "undefined") {
     effectToUse(() => {
       if (tagsCtx && tagsCtx.numberOfAudioTags > 0) {
@@ -11637,7 +12049,8 @@ var useMediaInTimeline = ({
       postmountDisplay,
       controls: null,
       effects: [],
-      refForOutline
+      refForOutline,
+      isInsideSeries: false
     });
     return () => {
       unregisterSequence(id);
@@ -11750,11 +12163,11 @@ var useBufferManager = (logLevel, mountTime) => {
     return { addBlock, listenForBuffering, listenForResume, buffering };
   }, [addBlock, buffering, listenForBuffering, listenForResume]);
 };
-var BufferingContextReact = React19.createContext(null);
+var BufferingContextReact = React20.createContext(null);
 var BufferingProvider = ({ children }) => {
   const { logLevel, mountTime } = useContext24(LogLevelContext);
   const bufferManager = useBufferManager(logLevel ?? "info", mountTime);
-  return /* @__PURE__ */ jsx19(BufferingContextReact.Provider, {
+  return /* @__PURE__ */ jsx20(BufferingContextReact.Provider, {
     value: bufferManager,
     children
   });
@@ -11901,7 +12314,7 @@ var useBufferUntilFirstFrame = ({
   }, [bufferUntilFirstFrame]);
 };
 var useCurrentTimeOfMediaTagWithUpdateTimeStamp = (mediaRef) => {
-  const lastUpdate = React20.useRef({
+  const lastUpdate = React21.useRef({
     time: mediaRef.current?.currentTime ?? 0,
     lastUpdate: performance.now()
   });
@@ -12479,11 +12892,11 @@ var useMediaTag = ({
     env.isPlayer
   ]);
 };
-var MediaVolumeContext = createContext21({
+var MediaVolumeContext = createContext22({
   mediaMuted: false,
   mediaVolume: 1
 });
-var SetMediaVolumeContext = createContext21({
+var SetMediaVolumeContext = createContext22({
   setMediaMuted: () => {
     throw new Error("default");
   },
@@ -12650,7 +13063,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     volume: userPreferredVolume,
     shouldUseWebAudioApi: useWebAudioApi ?? false
   });
-  const effectToUse = React21.useInsertionEffect ?? React21.useLayoutEffect;
+  const effectToUse = React22.useInsertionEffect ?? React22.useLayoutEffect;
   effectToUse(() => {
     return () => {
       requestAnimationFrame(() => {
@@ -12683,7 +13096,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
   if (initialShouldPreMountAudioElements) {
     return null;
   }
-  return /* @__PURE__ */ jsx20("audio", {
+  return /* @__PURE__ */ jsx21("audio", {
     ref: audioRef,
     preload: "metadata",
     crossOrigin: crossOriginValue,
@@ -12817,7 +13230,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   if (!needsToRenderAudioTag) {
     return null;
   }
-  return /* @__PURE__ */ jsx21("audio", {
+  return /* @__PURE__ */ jsx222("audio", {
     ref: audioRef,
     ...nativeProps,
     onError: onNativeError
@@ -12876,14 +13289,14 @@ var AudioRefForwardingFunction = (props, ref) => {
   });
   if (loop && durationFetched !== undefined) {
     if (!Number.isFinite(durationFetched)) {
-      return /* @__PURE__ */ jsx222(Html5Audio, {
+      return /* @__PURE__ */ jsx23(Html5Audio, {
         ...propsOtherThanLoop,
         ref,
         _remotionInternalNativeLoopPassed: true
       });
     }
     const duration = durationFetched * fps;
-    return /* @__PURE__ */ jsx222(Loop, {
+    return /* @__PURE__ */ jsx23(Loop, {
       layout: "none",
       durationInFrames: calculateMediaDuration({
         trimAfter: trimAfterValue,
@@ -12891,7 +13304,7 @@ var AudioRefForwardingFunction = (props, ref) => {
         playbackRate: props.playbackRate ?? 1,
         trimBefore: trimBeforeValue
       }),
-      children: /* @__PURE__ */ jsx222(Html5Audio, {
+      children: /* @__PURE__ */ jsx23(Html5Audio, {
         ...propsOtherThanLoop,
         ref,
         _remotionInternalNativeLoopPassed: true
@@ -12899,13 +13312,13 @@ var AudioRefForwardingFunction = (props, ref) => {
     });
   }
   if (typeof trimBeforeValue !== "undefined" || typeof trimAfterValue !== "undefined") {
-    return /* @__PURE__ */ jsx222(Sequence, {
+    return /* @__PURE__ */ jsx23(Sequence, {
       layout: "none",
       from: 0 - (trimBeforeValue ?? 0),
       showInTimeline: false,
       durationInFrames: trimAfterValue,
       name,
-      children: /* @__PURE__ */ jsx222(Html5Audio, {
+      children: /* @__PURE__ */ jsx23(Html5Audio, {
         _remotionInternalNeedsDurationCalculation: Boolean(loop),
         pauseWhenBuffering: pauseWhenBuffering ?? false,
         ...otherProps,
@@ -12919,7 +13332,7 @@ var AudioRefForwardingFunction = (props, ref) => {
     volume: props.volume
   }, "Html5Audio");
   if (environment.isRendering) {
-    return /* @__PURE__ */ jsx222(AudioForRendering, {
+    return /* @__PURE__ */ jsx23(AudioForRendering, {
       onDuration,
       ...props,
       ref,
@@ -12927,7 +13340,7 @@ var AudioRefForwardingFunction = (props, ref) => {
       _remotionInternalNeedsDurationCalculation: Boolean(loop)
     });
   }
-  return /* @__PURE__ */ jsx222(AudioForPreview, {
+  return /* @__PURE__ */ jsx23(AudioForPreview, {
     _remotionInternalNativeLoopPassed: props._remotionInternalNativeLoopPassed ?? false,
     _remotionInternalStack: stack ?? null,
     shouldPreMountAudioTags: audioTagsContext !== null && audioTagsContext.numberOfAudioTags > 0,
@@ -12943,7 +13356,18 @@ var AudioRefForwardingFunction = (props, ref) => {
 var Html5Audio = forwardRef7(AudioRefForwardingFunction);
 addSequenceStackTraces(Html5Audio);
 var Audio = Html5Audio;
+var resolveSolidPixelDensity = (pixelDensity) => {
+  if (pixelDensity === undefined) {
+    return 1;
+  }
+  if (typeof pixelDensity !== "number" || !Number.isFinite(pixelDensity) || pixelDensity <= 0) {
+    throw new Error(`<Solid>: \`pixelDensity\` must be a positive finite number. Received: ${String(pixelDensity)}.`);
+  }
+  return pixelDensity;
+};
 var solidSchema = {
+  durationInFrames: durationInFramesField,
+  from: fromField,
   color: {
     type: "color",
     default: "transparent",
@@ -12954,14 +13378,16 @@ var solidSchema = {
     min: 1,
     step: 1,
     default: 1920,
-    description: "Width"
+    description: "Width",
+    hiddenFromList: false
   },
   height: {
     type: "number",
     min: 1,
     step: 1,
     default: 1080,
-    description: "Height"
+    description: "Height",
+    hiddenFromList: false
   },
   ...sequenceVisualStyleSchema,
   hidden: hiddenField
@@ -12973,10 +13399,14 @@ var SolidInner = ({
   effects = [],
   className,
   style,
+  pixelDensity,
   overrideId,
   reference
 }) => {
   const { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
+  const resolvedPixelDensity = resolveSolidPixelDensity(pixelDensity);
+  const canvasWidth = Math.ceil(width * resolvedPixelDensity);
+  const canvasHeight = Math.ceil(height * resolvedPixelDensity);
   const [outputCanvas, setOutputCanvas] = useState15(null);
   const memoizedEffects = useMemoizedEffects({
     effects,
@@ -13022,12 +13452,12 @@ var SolidInner = ({
       ctx.fillRect(0, 0, 1, 1);
     }
     runEffectChain({
-      state: chainState.get(width, height),
+      state: chainState.get(canvasWidth, canvasHeight),
       source: sourceCanvas,
       effects: memoizedEffects,
       output: outputCanvas,
-      width,
-      height
+      width: canvasWidth,
+      height: canvasHeight
     }).then((completed) => {
       if (completed) {
         continueRender2(handle);
@@ -13043,19 +13473,26 @@ var SolidInner = ({
     outputCanvas,
     sourceCanvas,
     chainState,
-    width,
-    height,
+    canvasWidth,
+    canvasHeight,
     delayRender2,
     continueRender2,
     cancelRender2,
     memoizedEffects
   ]);
-  return /* @__PURE__ */ jsx23("canvas", {
+  const canvasStyle = useMemo29(() => {
+    return {
+      width,
+      height,
+      ...style ?? {}
+    };
+  }, [height, style, width]);
+  return /* @__PURE__ */ jsx24("canvas", {
     ref: canvasRef,
-    width,
-    height,
+    width: canvasWidth,
+    height: canvasHeight,
     className,
-    style
+    style: canvasStyle
   });
 };
 var SolidOuter = forwardRef8(({
@@ -13071,6 +13508,7 @@ var SolidOuter = forwardRef8(({
   from,
   hidden,
   showInTimeline,
+  pixelDensity,
   ...props2
 }, ref) => {
   const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
@@ -13078,7 +13516,7 @@ var SolidOuter = forwardRef8(({
   useImperativeHandle6(ref, () => {
     return actualRef.current;
   }, []);
-  return /* @__PURE__ */ jsx23(Sequence, {
+  return /* @__PURE__ */ jsx24(Sequence, {
     layout: "none",
     from,
     hidden,
@@ -13090,7 +13528,7 @@ var SolidOuter = forwardRef8(({
     _remotionInternalRefForOutline: actualRef,
     _remotionInternalDocumentationLink: name === undefined ? "https://www.remotion.dev/docs/solid" : undefined,
     ...props2,
-    children: /* @__PURE__ */ jsx23(SolidInner, {
+    children: /* @__PURE__ */ jsx24(SolidInner, {
       reference: actualRef,
       overrideId: controls?.overrideId ?? null,
       color,
@@ -13098,11 +13536,16 @@ var SolidOuter = forwardRef8(({
       width,
       className,
       style,
-      effects
+      effects,
+      pixelDensity
     })
   });
 });
-var Solid = wrapInSchema(SolidOuter, solidSchema);
+var Solid = wrapInSchema({
+  Component: SolidOuter,
+  schema: solidSchema,
+  supportsEffects: true
+});
 Solid.displayName = "Solid";
 addSequenceStackTraces(Solid);
 var cachedSupport = null;
@@ -13130,6 +13573,27 @@ function assertHtmlInCanvasDimensions(width, height) {
     throw new Error(`HtmlInCanvas: \`height\` must be a positive integer. Received: ${String(height)}.`);
   }
 }
+function resolveHtmlInCanvasPixelDensity(pixelDensity) {
+  if (pixelDensity === undefined) {
+    return 1;
+  }
+  if (typeof pixelDensity !== "number" || !Number.isFinite(pixelDensity) || pixelDensity <= 0) {
+    throw new Error(`HtmlInCanvas: \`pixelDensity\` must be a positive finite number. Received: ${String(pixelDensity)}.`);
+  }
+  return pixelDensity;
+}
+var resizeOffscreenCanvas = ({
+  offscreen,
+  width,
+  height
+}) => {
+  if (offscreen.width !== width) {
+    offscreen.width = width;
+  }
+  if (offscreen.height !== height) {
+    offscreen.height = height;
+  }
+};
 var defaultOnPaint = ({
   canvas,
   element,
@@ -13143,10 +13607,23 @@ var defaultOnPaint = ({
   const transform = ctx.drawElementImage(elementImage, 0, 0);
   element.style.transform = transform.toString();
 };
-var HtmlInCanvasAncestorContext = createContext22(false);
-var HtmlInCanvasContent = forwardRef9(({ width, height, effects, children, onPaint, onInit, controls, style }, ref) => {
+var HtmlInCanvasAncestorContext = createContext23(false);
+var HtmlInCanvasContent = forwardRef9(({
+  width,
+  height,
+  effects,
+  children,
+  onPaint,
+  onInit,
+  pixelDensity,
+  controls,
+  style
+}, ref) => {
   const isInsideAncestorHtmlInCanvas = useContext31(HtmlInCanvasAncestorContext);
   assertHtmlInCanvasDimensions(width, height);
+  const resolvedPixelDensity = resolveHtmlInCanvasPixelDensity(pixelDensity);
+  const canvasWidth = Math.ceil(width * resolvedPixelDensity);
+  const canvasHeight = Math.ceil(height * resolvedPixelDensity);
   const { continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
   if (!isHtmlInCanvasSupported()) {
     cancelRender2(new Error(HTML_IN_CANVAS_UNSUPPORTED_MESSAGE));
@@ -13154,7 +13631,7 @@ var HtmlInCanvasContent = forwardRef9(({ width, height, effects, children, onPai
   const canvas2dRef = useRef22(null);
   const offscreenRef = useRef22(null);
   const divRef = useRef22(null);
-  const canvasSizeKey = `${width}x${height}`;
+  const canvasSizeKey = `${width}x${height}@${resolvedPixelDensity}`;
   const setLayoutCanvasRef = useCallback15((node) => {
     canvas2dRef.current = node;
     if (typeof ref === "function") {
@@ -13186,8 +13663,11 @@ var HtmlInCanvasContent = forwardRef9(({ width, height, effects, children, onPai
     if (!offscreen) {
       throw new Error("HtmlInCanvas: offscreen canvas not ready (transferControlToOffscreen failed or canvas is remounting)");
     }
-    offscreen.width = width;
-    offscreen.height = height;
+    resizeOffscreenCanvas({
+      offscreen,
+      width: canvasWidth,
+      height: canvasHeight
+    });
     try {
       const placeholderCanvas = canvas2dRef.current;
       if (!placeholderCanvas) {
@@ -13206,7 +13686,8 @@ var HtmlInCanvasContent = forwardRef9(({ width, height, effects, children, onPai
           const cleanup = await currentOnInit({
             canvas: offscreen,
             element,
-            elementImage: initImage
+            elementImage: initImage,
+            pixelDensity: resolvedPixelDensity
           });
           if (typeof cleanup !== "function") {
             throw new Error("HtmlInCanvas: when `onInit` is provided, it must return a cleanup function, or a Promise that resolves to one.");
@@ -13223,21 +13704,29 @@ var HtmlInCanvasContent = forwardRef9(({ width, height, effects, children, onPai
       await handler({
         canvas: offscreen,
         element,
-        elementImage: elImage
+        elementImage: elImage,
+        pixelDensity: resolvedPixelDensity
       });
       await runEffectChain({
-        state: chainState.get(width, height),
+        state: chainState.get(canvasWidth, canvasHeight),
         source: offscreen,
         effects: effectsRef.current,
         output: offscreen,
-        width,
-        height
+        width: canvasWidth,
+        height: canvasHeight
       });
       continueRender2(handle);
     } catch (error2) {
       cancelRender2(error2);
     }
-  }, [chainState, continueRender2, cancelRender2, width, height]);
+  }, [
+    canvasHeight,
+    canvasWidth,
+    chainState,
+    continueRender2,
+    cancelRender2,
+    resolvedPixelDensity
+  ]);
   useLayoutEffect9(() => {
     const placeholder = canvas2dRef.current;
     if (!placeholder) {
@@ -13246,8 +13735,11 @@ var HtmlInCanvasContent = forwardRef9(({ width, height, effects, children, onPai
     placeholder.layoutSubtree = true;
     const offscreen = placeholder.transferControlToOffscreen();
     offscreenRef.current = offscreen;
-    offscreen.width = width;
-    offscreen.height = height;
+    resizeOffscreenCanvas({
+      offscreen,
+      width: canvasWidth,
+      height: canvasHeight
+    });
     initializedRef.current = false;
     unmountedRef.current = false;
     placeholder.addEventListener("paint", onPaintCb);
@@ -13259,7 +13751,7 @@ var HtmlInCanvasContent = forwardRef9(({ width, height, effects, children, onPai
       onInitCleanupRef.current?.();
       onInitCleanupRef.current = null;
     };
-  }, [onPaintCb, cancelRender2, width, height]);
+  }, [onPaintCb, cancelRender2, canvasWidth, canvasHeight]);
   const onPaintChangedRef = useRef22(false);
   useLayoutEffect9(() => {
     if (!onPaintChangedRef.current) {
@@ -13291,17 +13783,24 @@ var HtmlInCanvasContent = forwardRef9(({ width, height, effects, children, onPai
       height
     };
   }, [width, height]);
+  const canvasStyle = useMemo30(() => {
+    return {
+      width,
+      height,
+      ...style ?? {}
+    };
+  }, [height, style, width]);
   if (isInsideAncestorHtmlInCanvas) {
     throw new Error("<HtmlInCanvas> effects cannot be nested together. Chrome will only display the outer effect. Consider merging the effects into one if you can.");
   }
-  return /* @__PURE__ */ jsx24(HtmlInCanvasAncestorContext.Provider, {
+  return /* @__PURE__ */ jsx25(HtmlInCanvasAncestorContext.Provider, {
     value: true,
-    children: /* @__PURE__ */ jsx24("canvas", {
+    children: /* @__PURE__ */ jsx25("canvas", {
       ref: setLayoutCanvasRef,
-      width,
-      height,
-      style,
-      children: /* @__PURE__ */ jsx24("div", {
+      width: canvasWidth,
+      height: canvasHeight,
+      style: canvasStyle,
+      children: /* @__PURE__ */ jsx25("div", {
         ref: divRef,
         style: innerStyle,
         children
@@ -13317,6 +13816,7 @@ var HtmlInCanvasInner = forwardRef9(({
   children,
   onPaint,
   onInit,
+  pixelDensity,
   _experimentalControls: controls,
   style,
   durationInFrames,
@@ -13326,21 +13826,32 @@ var HtmlInCanvasInner = forwardRef9(({
   const { durationInFrames: videoDuration } = useVideoConfig();
   const resolvedDuration = durationInFrames ?? videoDuration;
   const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
-  return /* @__PURE__ */ jsx24(Sequence, {
+  const actualRef = useRef22(null);
+  const setCanvasRef = useCallback15((node) => {
+    actualRef.current = node;
+    if (typeof ref === "function") {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
+    }
+  }, [ref]);
+  return /* @__PURE__ */ jsx25(Sequence, {
     durationInFrames: resolvedDuration,
     name: name ?? "<HtmlInCanvas>",
     _remotionInternalDocumentationLink: name === undefined ? "https://www.remotion.dev/docs/remotion/html-in-canvas" : undefined,
     _experimentalControls: controls,
     _remotionInternalEffects: memoizedEffectDefinitions,
+    _remotionInternalRefForOutline: actualRef,
     layout: "none",
     ...sequenceProps,
-    children: /* @__PURE__ */ jsx24(HtmlInCanvasContent, {
-      ref,
+    children: /* @__PURE__ */ jsx25(HtmlInCanvasContent, {
+      ref: setCanvasRef,
       width,
       height,
       effects,
       onPaint,
       onInit,
+      pixelDensity,
       controls,
       style,
       children
@@ -13349,10 +13860,16 @@ var HtmlInCanvasInner = forwardRef9(({
 });
 HtmlInCanvasInner.displayName = "HtmlInCanvas";
 var htmlInCanvasSchema = {
+  durationInFrames: durationInFramesField,
+  from: fromField,
   ...sequenceVisualStyleSchema,
   hidden: hiddenField
 };
-var HtmlInCanvasWrapped = wrapInSchema(HtmlInCanvasInner, htmlInCanvasSchema);
+var HtmlInCanvasWrapped = wrapInSchema({
+  Component: HtmlInCanvasInner,
+  schema: htmlInCanvasSchema,
+  supportsEffects: true
+});
 var HtmlInCanvas = Object.assign(HtmlInCanvasWrapped, {
   isSupported: isHtmlInCanvasSupported
 });
@@ -13365,6 +13882,8 @@ function truncateSrcForLabel(src) {
   return src;
 }
 var canvasImageSchema = {
+  durationInFrames: durationInFramesField,
+  from: fromField,
   fit: {
     type: "enum",
     default: "fill",
@@ -13451,6 +13970,7 @@ var CanvasImageContent = forwardRef10(({
   maxRetries = 2,
   delayRenderRetries,
   delayRenderTimeoutInMilliseconds,
+  refForOutline,
   ...canvasProps
 }, ref) => {
   const { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
@@ -13471,12 +13991,15 @@ var CanvasImageContent = forwardRef10(({
   }, []);
   const canvasRef = useCallback16((canvas) => {
     setOutputCanvas(canvas);
+    if (refForOutline) {
+      refForOutline.current = canvas;
+    }
     if (typeof ref === "function") {
       ref(canvas);
     } else if (ref) {
       ref.current = canvas;
     }
-  }, [ref]);
+  }, [ref, refForOutline]);
   useEffect17(() => {
     if (!outputCanvas || !sourceCanvas) {
       return;
@@ -13586,7 +14109,7 @@ var CanvasImageContent = forwardRef10(({
     sourceCanvas,
     width
   ]);
-  return /* @__PURE__ */ jsx25("canvas", {
+  return /* @__PURE__ */ jsx26("canvas", {
     ...canvasProps,
     ref: canvasRef,
     width,
@@ -13619,13 +14142,18 @@ var CanvasImageInner = forwardRef10(({
   stack,
   _experimentalControls: controls,
   _remotionInternalDocumentationLink,
+  _remotionInternalRefForOutline,
   ...canvasProps
 }, ref) => {
   if (!src) {
     throw new Error('No "src" prop was passed to <CanvasImage>.');
   }
   const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
-  return /* @__PURE__ */ jsx25(Sequence, {
+  const actualRef = useRef23(null);
+  useImperativeHandle7(ref, () => {
+    return actualRef.current;
+  }, []);
+  return /* @__PURE__ */ jsx26(Sequence, {
     layout: "none",
     from: from ?? 0,
     durationInFrames: durationInFrames ?? Infinity,
@@ -13637,8 +14165,9 @@ var CanvasImageInner = forwardRef10(({
     _remotionInternalEffects: memoizedEffectDefinitions,
     _remotionInternalIsMedia: { type: "image", src },
     _remotionInternalStack: stack,
-    children: /* @__PURE__ */ jsx25(CanvasImageContent, {
-      ref,
+    _remotionInternalRefForOutline: _remotionInternalRefForOutline ?? actualRef,
+    children: /* @__PURE__ */ jsx26(CanvasImageContent, {
+      ref: actualRef,
       src,
       width,
       height,
@@ -13653,11 +14182,16 @@ var CanvasImageInner = forwardRef10(({
       maxRetries,
       delayRenderRetries,
       delayRenderTimeoutInMilliseconds,
+      refForOutline: _remotionInternalRefForOutline ?? null,
       ...canvasProps
     })
   });
 });
-var CanvasImage = wrapInSchema(CanvasImageInner, canvasImageSchema);
+var CanvasImage = wrapInSchema({
+  Component: CanvasImageInner,
+  schema: canvasImageSchema,
+  supportsEffects: true
+});
 CanvasImage.displayName = "CanvasImage";
 addSequenceStackTraces(CanvasImage);
 var IFrameRefForwarding = ({
@@ -13684,7 +14218,7 @@ var IFrameRefForwarding = ({
       console.error("Error loading iframe:", e, "Handle the event using the onError() prop to make this message disappear.");
     }
   }, [handle, onError, continueRender2]);
-  return /* @__PURE__ */ jsx26("iframe", {
+  return /* @__PURE__ */ jsx27("iframe", {
     referrerPolicy: "strict-origin-when-cross-origin",
     ...props2,
     ref,
@@ -13707,19 +14241,26 @@ var ImgContent = ({
   crossOrigin,
   decoding,
   ref,
+  refForOutline,
   ...props2
 }) => {
-  const imageRef = useRef23(null);
-  const errors = useRef23({});
+  const imageRef = useRef24(null);
+  const errors = useRef24({});
   const { delayPlayback } = useBufferState();
   const sequenceContext = useContext33(SequenceContext);
   const _propsValid = true;
   if (!_propsValid) {
     throw new Error("typecheck error");
   }
-  useImperativeHandle7(ref, () => {
-    return imageRef.current;
-  }, []);
+  const imageCallbackRef = useCallback18((img) => {
+    imageRef.current = img;
+    refForOutline.current = img;
+    if (typeof ref === "function") {
+      ref(img);
+    } else if (ref) {
+      ref.current = img;
+    }
+  }, [ref, refForOutline]);
   const actualSrc = usePreload(src);
   const retryIn = useCallback18((timeout) => {
     if (!imageRef.current) {
@@ -13833,9 +14374,9 @@ var ImgContent = ({
     requestsVideoFrame: false,
     isClientSideRendering
   });
-  return /* @__PURE__ */ jsx27("img", {
+  return /* @__PURE__ */ jsx28("img", {
     ...props2,
-    ref: imageRef,
+    ref: imageCallbackRef,
     crossOrigin: crossOriginValue,
     onError: didGetError,
     decoding: isRendering ? "sync" : decoding
@@ -13850,12 +14391,13 @@ var NativeImgInner = ({
   from,
   durationInFrames,
   _experimentalControls: controls,
+  _remotionInternalRefForOutline: refForOutline,
   ...props2
 }) => {
   if (!src) {
     throw new Error('No "src" prop was passed to <Img>.');
   }
-  return /* @__PURE__ */ jsx27(Sequence, {
+  return /* @__PURE__ */ jsx28(Sequence, {
     layout: "none",
     from: from ?? 0,
     durationInFrames: durationInFrames ?? Infinity,
@@ -13866,14 +14408,18 @@ var NativeImgInner = ({
     _experimentalControls: controls,
     showInTimeline: showInTimeline ?? true,
     hidden,
-    children: /* @__PURE__ */ jsx27(ImgContent, {
+    _remotionInternalRefForOutline: refForOutline,
+    children: /* @__PURE__ */ jsx28(ImgContent, {
       src,
+      refForOutline,
       ...props2
     })
   });
 };
 var CanvasImageWithPrivateProps = CanvasImage;
 var imgSchema = {
+  durationInFrames: durationInFramesField,
+  from: fromField,
   ...sequenceVisualStyleSchema,
   hidden: hiddenField
 };
@@ -13941,8 +14487,9 @@ var ImgInner = ({
   delayRenderTimeoutInMilliseconds,
   ...props2
 }) => {
+  const refForOutline = useRef24(null);
   if (effects.length === 0) {
-    return /* @__PURE__ */ jsx27(NativeImgInner, {
+    return /* @__PURE__ */ jsx28(NativeImgInner, {
       ...props2,
       ref,
       hidden,
@@ -13961,7 +14508,8 @@ var ImgInner = ({
       pauseWhenLoading,
       maxRetries,
       delayRenderRetries,
-      delayRenderTimeoutInMilliseconds
+      delayRenderTimeoutInMilliseconds,
+      _remotionInternalRefForOutline: refForOutline
     });
   }
   if (!src) {
@@ -13977,7 +14525,7 @@ var ImgInner = ({
   const canvasHeight = typeof height === "number" ? height : undefined;
   const canvasProps = props2;
   const canvasFit = getFitFromObjectFit(style) ?? "fill";
-  return /* @__PURE__ */ jsx27(CanvasImageWithPrivateProps, {
+  return /* @__PURE__ */ jsx28(CanvasImageWithPrivateProps, {
     src,
     width: canvasWidth,
     height: canvasHeight,
@@ -13998,12 +14546,17 @@ var ImgInner = ({
     stack,
     _remotionInternalDocumentationLink: name === undefined ? "https://www.remotion.dev/docs/img" : undefined,
     _experimentalControls: controls,
+    _remotionInternalRefForOutline: refForOutline,
     ...canvasProps
   });
 };
-var Img = wrapInSchema(ImgInner, imgSchema);
+var Img = wrapInSchema({
+  Component: ImgInner,
+  schema: imgSchema,
+  supportsEffects: true
+});
 addSequenceStackTraces(Img);
-var compositionsRef = React28.createRef();
+var compositionsRef = React29.createRef();
 var CompositionManagerProvider = ({
   children,
   onlyRenderComposition,
@@ -14014,7 +14567,7 @@ var CompositionManagerProvider = ({
   const [folders, setFolders] = useState18([]);
   const [canvasContent, setCanvasContent] = useState18(initialCanvasContent);
   const [compositions, setCompositions] = useState18(initialCompositions);
-  const currentcompositionsRef = useRef24(compositions);
+  const currentcompositionsRef = useRef25(compositions);
   const updateCompositions = useCallback19((updateComps) => {
     setCompositions((comps) => {
       const updated = updateComps(comps);
@@ -14035,14 +14588,15 @@ var CompositionManagerProvider = ({
       return comps.filter((c2) => c2.id !== id);
     });
   }, []);
-  const registerFolder = useCallback19((name, parent, nonce) => {
+  const registerFolder = useCallback19((name, parent, nonce, stack) => {
     setFolders((prevFolders) => {
       return [
         ...prevFolders,
         {
           name,
           parent,
-          nonce
+          nonce,
+          stack
         }
       ];
     });
@@ -14081,9 +14635,9 @@ var CompositionManagerProvider = ({
       canvasContent
     };
   }, [compositions, folders, currentCompositionMetadata, canvasContent]);
-  return /* @__PURE__ */ jsx28(CompositionManager.Provider, {
+  return /* @__PURE__ */ jsx29(CompositionManager.Provider, {
     value: compositionManagerContextValue,
-    children: /* @__PURE__ */ jsx28(CompositionSetters.Provider, {
+    children: /* @__PURE__ */ jsx29(CompositionSetters.Provider, {
       value: compositionManagerSetters,
       children
     })
@@ -14181,7 +14735,7 @@ var REMOTION_STUDIO_CONTAINER_ELEMENT = "__remotion-studio-container";
 var getPreviewDomElement = () => {
   return document.getElementById(REMOTION_STUDIO_CONTAINER_ELEMENT);
 };
-var MaxMediaCacheSizeContext = React29.createContext(null);
+var MaxMediaCacheSizeContext = React30.createContext(null);
 var Root = null;
 var listeners = [];
 var getRoot = () => {
@@ -14199,7 +14753,7 @@ var waitForRoot = (fn) => {
     listeners = listeners.filter((l) => l !== fn);
   };
 };
-var MediaEnabledContext = createContext23(null);
+var MediaEnabledContext = createContext24(null);
 var useVideoEnabled = () => {
   const context = useContext34(MediaEnabledContext);
   if (!context) {
@@ -14226,7 +14780,7 @@ var MediaEnabledProvider = ({
   audioEnabled
 }) => {
   const value = useMemo33(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
-  return /* @__PURE__ */ jsx29(MediaEnabledContext.Provider, {
+  return /* @__PURE__ */ jsx30(MediaEnabledContext.Provider, {
     value,
     children
   });
@@ -14250,25 +14804,25 @@ var RemotionRootContexts = ({
   const logging = useMemo34(() => {
     return { logLevel, mountTime: Date.now() };
   }, [logLevel]);
-  return /* @__PURE__ */ jsx30(LogLevelContext.Provider, {
+  return /* @__PURE__ */ jsx31(LogLevelContext.Provider, {
     value: logging,
-    children: /* @__PURE__ */ jsx30(NonceContext.Provider, {
+    children: /* @__PURE__ */ jsx31(NonceContext.Provider, {
       value: nonceContext,
-      children: /* @__PURE__ */ jsx30(TimelineContextProvider, {
+      children: /* @__PURE__ */ jsx31(TimelineContextProvider, {
         frameState,
-        children: /* @__PURE__ */ jsx30(MediaEnabledProvider, {
+        children: /* @__PURE__ */ jsx31(MediaEnabledProvider, {
           videoEnabled,
           audioEnabled,
-          children: /* @__PURE__ */ jsx30(EditorPropsProvider, {
-            children: /* @__PURE__ */ jsx30(PrefetchProvider, {
-              children: /* @__PURE__ */ jsx30(SequenceManagerProvider, {
-                children: /* @__PURE__ */ jsx30(DurationsContextProvider, {
-                  children: /* @__PURE__ */ jsx30(BufferingProvider, {
-                    children: /* @__PURE__ */ jsx30(SharedAudioContextProvider, {
+          children: /* @__PURE__ */ jsx31(EditorPropsProvider, {
+            children: /* @__PURE__ */ jsx31(PrefetchProvider, {
+              children: /* @__PURE__ */ jsx31(SequenceManagerProvider, {
+                children: /* @__PURE__ */ jsx31(DurationsContextProvider, {
+                  children: /* @__PURE__ */ jsx31(BufferingProvider, {
+                    children: /* @__PURE__ */ jsx31(SharedAudioContextProvider, {
                       audioLatencyHint,
                       audioEnabled,
                       previewSampleRate,
-                      children: /* @__PURE__ */ jsx30(SharedAudioTagsContextProvider, {
+                      children: /* @__PURE__ */ jsx31(SharedAudioTagsContextProvider, {
                         numberOfAudioTags,
                         children
                       })
@@ -14454,7 +15008,7 @@ var resolveVideoConfigOrCatch = (params) => {
     };
   }
 };
-var SequenceStackTracesUpdateContext = React31.createContext(() => {});
+var SequenceStackTracesUpdateContext = React32.createContext(() => {});
 var getEnvVariables = () => {
   if (getRemotionEnvironment().isRendering) {
     const param = window.remotion_envVariables;
@@ -14480,8 +15034,8 @@ var setupEnvVariables = () => {
     window.process.env[key] = env[key];
   });
 };
-var CurrentScaleContext = React32.createContext(null);
-var PreviewSizeContext = createContext24({
+var CurrentScaleContext = React33.createContext(null);
+var PreviewSizeContext = createContext25({
   setSize: () => {
     return;
   },
@@ -14504,6 +15058,7 @@ var calculateScale = ({
   }
   return Number(previewSize);
 };
+var PixelDensityContext = React34.createContext(null);
 var getOffthreadVideoSource = ({
   src,
   transparent,
@@ -14536,9 +15091,9 @@ var OffthreadVideoForRendering = ({
   const frame = useCurrentFrame();
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior);
   const videoConfig = useUnsafeVideoConfig();
-  const sequenceContext = useContext35(SequenceContext);
+  const sequenceContext = useContext36(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext35(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext36(RenderAssetManager);
   if (!src) {
     throw new TypeError("No `src` was passed to <OffthreadVideo>.");
   }
@@ -14704,7 +15259,7 @@ var OffthreadVideoForRendering = ({
     return null;
   }
   continueRender2(imageSrc.handle);
-  return /* @__PURE__ */ jsx31(Img, {
+  return /* @__PURE__ */ jsx322(Img, {
     src: imageSrc.src,
     delayRenderRetries,
     delayRenderTimeoutInMilliseconds,
@@ -14727,16 +15282,22 @@ var useEmitVideoFrame = ({
       return;
     }
     let handle = 0;
-    const callback = () => {
+    const callback = (_now, metadata) => {
       if (!ref.current) {
         return;
       }
-      onVideoFrame(ref.current);
+      onVideoFrame(ref.current, _now, metadata);
       handle = ref.current.requestVideoFrameCallback(callback);
     };
-    callback();
+    onVideoFrame(current);
+    if (!current.requestVideoFrameCallback) {
+      return;
+    }
+    handle = current.requestVideoFrameCallback(callback);
     return () => {
-      current.cancelVideoFrameCallback(handle);
+      if (handle) {
+        current.cancelVideoFrameCallback(handle);
+      }
     };
   }, [onVideoFrame, ref]);
 };
@@ -14750,11 +15311,11 @@ class MediaPlaybackError extends Error {
   }
 }
 var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
-  const context = useContext36(SharedAudioContext);
+  const context = useContext37(SharedAudioContext);
   if (!context) {
     throw new Error("SharedAudioContext not found");
   }
-  const videoRef = useRef25(null);
+  const videoRef = useRef26(null);
   const sharedSource = useMemo36(() => {
     if (!context.audioContext) {
       return null;
@@ -14764,7 +15325,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       ref: videoRef
     });
   }, [context.audioContext]);
-  const effectToUse = React34.useInsertionEffect ?? React34.useLayoutEffect;
+  const effectToUse = React36.useInsertionEffect ?? React36.useLayoutEffect;
   effectToUse(() => {
     return () => {
       requestAnimationFrame(() => {
@@ -14807,7 +15368,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   }
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const { fps, durationInFrames } = useVideoConfig();
-  const parentSequence = useContext36(SequenceContext);
+  const parentSequence = useContext37(SequenceContext);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const [timelineId] = useState20(() => String(Math.random()));
@@ -14927,7 +15488,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.removeEventListener("error", errorHandler);
     };
   }, [onError, src]);
-  const currentOnDurationCallback = useRef25(onDuration);
+  const currentOnDurationCallback = useRef26(onDuration);
   currentOnDurationCallback.current = onDuration;
   useEmitVideoFrame({ ref: videoRef, onVideoFrame });
   useEffect20(() => {
@@ -14968,7 +15529,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     requestsVideoFrame: Boolean(onVideoFrame),
     isClientSideRendering: false
   });
-  return /* @__PURE__ */ jsx322("video", {
+  return /* @__PURE__ */ jsx33("video", {
     ref: videoRef,
     muted: muted || mediaMuted || userPreferredVolume <= 0,
     playsInline: true,
@@ -15011,13 +15572,13 @@ var InnerOffthreadVideo = (props2) => {
     trimAfter
   });
   if (typeof trimBeforeValue !== "undefined" || typeof trimAfterValue !== "undefined") {
-    return /* @__PURE__ */ jsx33(Sequence, {
+    return /* @__PURE__ */ jsx34(Sequence, {
       layout: "none",
       from: 0 - (trimBeforeValue ?? 0),
       showInTimeline: false,
       durationInFrames: trimAfterValue,
       name,
-      children: /* @__PURE__ */ jsx33(InnerOffthreadVideo, {
+      children: /* @__PURE__ */ jsx34(InnerOffthreadVideo, {
         pauseWhenBuffering: pauseWhenBuffering ?? false,
         ...otherProps,
         trimAfter: undefined,
@@ -15032,7 +15593,7 @@ var InnerOffthreadVideo = (props2) => {
   }
   validateMediaProps(props2, "Video");
   if (environment.isRendering) {
-    return /* @__PURE__ */ jsx33(OffthreadVideoForRendering, {
+    return /* @__PURE__ */ jsx34(OffthreadVideoForRendering, {
       pauseWhenBuffering: pauseWhenBuffering ?? false,
       ...otherProps,
       trimAfter: undefined,
@@ -15054,7 +15615,7 @@ var InnerOffthreadVideo = (props2) => {
     delayRenderTimeoutInMilliseconds,
     ...propsForPreview
   } = otherProps;
-  return /* @__PURE__ */ jsx33(VideoForPreview, {
+  return /* @__PURE__ */ jsx34(VideoForPreview, {
     _remotionInternalStack: stack ?? null,
     onDuration,
     onlyWarnForMediaSeekingError: true,
@@ -15072,11 +15633,9 @@ var OffthreadVideo = ({
   acceptableTimeShiftInSeconds,
   allowAmplificationDuringRender,
   audioStreamIndex,
-  className,
   crossOrigin,
   delayRenderRetries,
   delayRenderTimeoutInMilliseconds,
-  id,
   loopVolumeCurveBehavior,
   muted,
   name,
@@ -15099,20 +15658,19 @@ var OffthreadVideo = ({
   endAt,
   stack,
   startFrom,
-  imageFormat
+  imageFormat,
+  ...props2
 }) => {
   if (imageFormat) {
     throw new TypeError(`The \`<OffthreadVideo>\` tag does no longer accept \`imageFormat\`. Use the \`transparent\` prop if you want to render a transparent video.`);
   }
-  return /* @__PURE__ */ jsx33(InnerOffthreadVideo, {
+  return /* @__PURE__ */ jsx34(InnerOffthreadVideo, {
     acceptableTimeShiftInSeconds,
     allowAmplificationDuringRender: allowAmplificationDuringRender ?? true,
     audioStreamIndex: audioStreamIndex ?? 0,
-    className,
     crossOrigin,
     delayRenderRetries,
     delayRenderTimeoutInMilliseconds,
-    id,
     loopVolumeCurveBehavior: loopVolumeCurveBehavior ?? "repeat",
     muted: muted ?? false,
     name,
@@ -15135,24 +15693,25 @@ var OffthreadVideo = ({
     trimAfter,
     trimBefore,
     useWebAudioApi: useWebAudioApi ?? false,
-    volume
+    volume,
+    ...props2
   });
 };
 addSequenceStackTraces(OffthreadVideo);
 var WATCH_REMOTION_STATIC_FILES = "remotion_staticFilesChanged";
 function useRemotionContexts() {
-  const compositionManagerCtx = React36.useContext(CompositionManager);
-  const timelineContext = React36.useContext(TimelineContext);
-  const setTimelineContext = React36.useContext(SetTimelineContext);
-  const sequenceContext = React36.useContext(SequenceContext);
-  const nonceContext = React36.useContext(NonceContext);
-  const canUseRemotionHooksContext = React36.useContext(CanUseRemotionHooks);
-  const preloadContext = React36.useContext(PreloadContext);
-  const resolveCompositionContext = React36.useContext(ResolveCompositionContext);
-  const renderAssetManagerContext = React36.useContext(RenderAssetManager);
-  const sequenceManagerContext = React36.useContext(SequenceManager);
-  const bufferManagerContext = React36.useContext(BufferingContextReact);
-  const logLevelContext = React36.useContext(LogLevelContext);
+  const compositionManagerCtx = React38.useContext(CompositionManager);
+  const timelineContext = React38.useContext(TimelineContext);
+  const setTimelineContext = React38.useContext(SetTimelineContext);
+  const sequenceContext = React38.useContext(SequenceContext);
+  const nonceContext = React38.useContext(NonceContext);
+  const canUseRemotionHooksContext = React38.useContext(CanUseRemotionHooks);
+  const preloadContext = React38.useContext(PreloadContext);
+  const resolveCompositionContext = React38.useContext(ResolveCompositionContext);
+  const renderAssetManagerContext = React38.useContext(RenderAssetManager);
+  const sequenceManagerContext = React38.useContext(SequenceManager);
+  const bufferManagerContext = React38.useContext(BufferingContextReact);
+  const logLevelContext = React38.useContext(LogLevelContext);
   return useMemo37(() => ({
     compositionManagerCtx,
     timelineContext,
@@ -15183,29 +15742,29 @@ function useRemotionContexts() {
 }
 var RemotionContextProvider = (props2) => {
   const { children, contexts } = props2;
-  return /* @__PURE__ */ jsx34(LogLevelContext.Provider, {
+  return /* @__PURE__ */ jsx35(LogLevelContext.Provider, {
     value: contexts.logLevelContext,
-    children: /* @__PURE__ */ jsx34(CanUseRemotionHooks.Provider, {
+    children: /* @__PURE__ */ jsx35(CanUseRemotionHooks.Provider, {
       value: contexts.canUseRemotionHooksContext,
-      children: /* @__PURE__ */ jsx34(NonceContext.Provider, {
+      children: /* @__PURE__ */ jsx35(NonceContext.Provider, {
         value: contexts.nonceContext,
-        children: /* @__PURE__ */ jsx34(PreloadContext.Provider, {
+        children: /* @__PURE__ */ jsx35(PreloadContext.Provider, {
           value: contexts.preloadContext,
-          children: /* @__PURE__ */ jsx34(CompositionManager.Provider, {
+          children: /* @__PURE__ */ jsx35(CompositionManager.Provider, {
             value: contexts.compositionManagerCtx,
-            children: /* @__PURE__ */ jsx34(SequenceManager.Provider, {
+            children: /* @__PURE__ */ jsx35(SequenceManager.Provider, {
               value: contexts.sequenceManagerContext,
-              children: /* @__PURE__ */ jsx34(RenderAssetManager.Provider, {
+              children: /* @__PURE__ */ jsx35(RenderAssetManager.Provider, {
                 value: contexts.renderAssetManagerContext,
-                children: /* @__PURE__ */ jsx34(ResolveCompositionContext.Provider, {
+                children: /* @__PURE__ */ jsx35(ResolveCompositionContext.Provider, {
                   value: contexts.resolveCompositionContext,
-                  children: /* @__PURE__ */ jsx34(TimelineContext.Provider, {
+                  children: /* @__PURE__ */ jsx35(TimelineContext.Provider, {
                     value: contexts.timelineContext,
-                    children: /* @__PURE__ */ jsx34(SetTimelineContext.Provider, {
+                    children: /* @__PURE__ */ jsx35(SetTimelineContext.Provider, {
                       value: contexts.setTimelineContext,
-                      children: /* @__PURE__ */ jsx34(SequenceContext.Provider, {
+                      children: /* @__PURE__ */ jsx35(SequenceContext.Provider, {
                         value: contexts.sequenceContext,
-                        children: /* @__PURE__ */ jsx34(BufferingContextReact.Provider, {
+                        children: /* @__PURE__ */ jsx35(BufferingContextReact.Provider, {
                           value: contexts.bufferManagerContext,
                           children
                         })
@@ -15273,8 +15832,10 @@ var Internals = {
   SharedAudioTagsContext,
   SharedAudioTagsContextProvider,
   invalidCompositionErrorMessage,
+  invalidFolderNameErrorMessage,
   calculateMediaDuration,
   isCompositionIdValid,
+  isFolderNameValid,
   getPreviewDomElement,
   compositionsRef,
   portalNode,
@@ -15309,6 +15870,7 @@ var Internals = {
   BufferingContextReact,
   getComponentsToAddStacksTo,
   CurrentScaleContext,
+  PixelDensityContext,
   PreviewSizeContext,
   calculateScale,
   validateRenderAsset,
@@ -15348,13 +15910,19 @@ var Internals = {
   createWebGL2ContextError,
   computeEffectiveSchemaValuesDotNotation,
   interpolateKeyframedStatus,
+  makeStaticDragOverride,
+  makeKeyframedDragOverride,
+  resolveDragOverrideValue,
+  getStaticDragOverrideValue,
   OverrideIdsToNodePathsGettersContext,
   OverrideIdsToNodePathsSettersContext,
   findPropsToDelete,
   makeSequencePropsSubscriptionKey,
   getCodeValuesCtx,
   getEffectCodeValuesCtx,
-  hiddenField
+  hiddenField,
+  durationInFramesField,
+  fromField
 };
 var validateFrame = ({
   allowFloats,
@@ -15381,34 +15949,15 @@ var validateFrame = ({
   }
 };
 var flattenChildren = (children) => {
-  const childrenArray = React37.Children.toArray(children);
+  const childrenArray = React39.Children.toArray(children);
   return childrenArray.reduce((flatChildren, child) => {
-    if (child.type === React37.Fragment) {
+    if (child.type === React39.Fragment) {
       return flatChildren.concat(flattenChildren(child.props.children));
     }
     flatChildren.push(child);
     return flatChildren;
   }, []);
 };
-var IsInsideSeriesContext = createContext25(false);
-var IsInsideSeriesContainer = ({ children }) => {
-  return /* @__PURE__ */ jsx35(IsInsideSeriesContext.Provider, {
-    value: true,
-    children
-  });
-};
-var IsNotInsideSeriesProvider = ({ children }) => {
-  return /* @__PURE__ */ jsx35(IsInsideSeriesContext.Provider, {
-    value: false,
-    children
-  });
-};
-var useRequireToBeInsideSeries = () => {
-  const isInsideSeries = React38.useContext(IsInsideSeriesContext);
-  if (!isInsideSeries) {
-    throw new Error("This component must be inside a <Series /> component.");
-  }
-};
 var SeriesSequenceRefForwardingFunction = ({ children }, _ref) => {
   useRequireToBeInsideSeries();
   return /* @__PURE__ */ jsx36(IsNotInsideSeriesProvider, {
@@ -15479,7 +16028,11 @@ var SeriesInner = (props2) => {
     })
   });
 };
-var Series = Object.assign(wrapInSchema(SeriesInner, sequenceSchemaDefaultLayoutNone), {
+var Series = Object.assign(wrapInSchema({
+  Component: SeriesInner,
+  schema: sequenceSchemaDefaultLayoutNone,
+  supportsEffects: false
+}), {
   Sequence: SeriesSequence
 });
 addSequenceStackTraces(Series);
@@ -15949,14 +16502,14 @@ var VideoForRenderingForwardFunction = ({
   const frame = useCurrentFrame();
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const videoConfig = useUnsafeVideoConfig();
-  const videoRef = useRef26(null);
-  const sequenceContext = useContext37(SequenceContext);
+  const videoRef = useRef27(null);
+  const sequenceContext = useContext38(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
   const environment = useRemotionEnvironment();
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext37(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext38(RenderAssetManager);
   const id = useMemo39(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     props2.src,
     sequenceContext?.cumulatedFrom,
@@ -16015,6 +16568,7 @@ var VideoForRenderingForwardFunction = ({
   useImperativeHandle10(ref, () => {
     return videoRef.current;
   }, []);
+  useEmitVideoFrame({ ref: videoRef, onVideoFrame });
   useEffect21(() => {
     if (!window.remotion_videoEnabled) {
       return;
@@ -16158,6 +16712,7 @@ var VideoForwardingFunction = (props2, ref) => {
     _remotionInternalNativeLoopPassed,
     showInTimeline,
     onAutoPlayError,
+    onVideoFrame,
     ...otherProps
   } = props2;
   const { loop, ...propsOtherThanLoop } = props2;
@@ -16166,7 +16721,7 @@ var VideoForwardingFunction = (props2, ref) => {
   if (environment.isClientSideRendering) {
     throw new Error("<Html5Video> is not supported in @remotion/web-renderer. Use <Video> from @remotion/media instead. See https://remotion.dev/docs/client-side-rendering/limitations");
   }
-  const { durations, setDurations } = useContext38(DurationsContext);
+  const { durations, setDurations } = useContext39(DurationsContext);
   if (typeof ref === "string") {
     throw new Error("string refs are not supported");
   }
@@ -16177,7 +16732,6 @@ var VideoForwardingFunction = (props2, ref) => {
   const onDuration = useCallback23((src, durationInSeconds) => {
     setDurations({ type: "got-duration", durationInSeconds, src });
   }, [setDurations]);
-  const onVideoFrame = useCallback23(() => {}, []);
   const durationFetched = durations[getAbsoluteSrc(preloadedSrc)] ?? durations[getAbsoluteSrc(props2.src)];
   validateMediaTrimProps({ startFrom, endAt, trimBefore, trimAfter });
   const { trimBeforeValue, trimAfterValue } = resolveTrimProps({
@@ -16223,6 +16777,7 @@ var VideoForwardingFunction = (props2, ref) => {
       name,
       children: /* @__PURE__ */ jsx38(Html5Video, {
         pauseWhenBuffering: pauseWhenBuffering ?? false,
+        onVideoFrame,
         ...otherProps,
         ref,
         stack
@@ -16246,7 +16801,7 @@ var VideoForwardingFunction = (props2, ref) => {
     onlyWarnForMediaSeekingError: false,
     ...otherProps,
     ref,
-    onVideoFrame: null,
+    onVideoFrame: onVideoFrame ?? null,
     pauseWhenBuffering: pauseWhenBuffering ?? false,
     onDuration,
     _remotionInternalStack: stack ?? null,
@@ -16281,11 +16836,12 @@ var Config = new Proxy(proxyObj, {
 Sequence.displayName = "Sequence";
 addSequenceStackTraces(Sequence);
 addSequenceStackTraces(Composition);
+addSequenceStackTraces(Folder);
 
 // ../design/dist/esm/index.mjs
 import { jsx as jsx210, Fragment as Fragment3 } from "react/jsx-runtime";
 import { jsx as jsx310, jsxs as jsxs3 } from "react/jsx-runtime";
-import { useEffect as useEffect23, useMemo as useMemo210, useRef as useRef28 } from "react";
+import { useEffect as useEffect23, useMemo as useMemo210, useRef as useRef29 } from "react";
 import { jsx as jsx43 } from "react/jsx-runtime";
 import { jsx as jsx53, jsxs as jsxs23 } from "react/jsx-runtime";
 import React62 from "react";
@@ -16308,15 +16864,15 @@ 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 React162 from "react";
+import * as React132 from "react";
 import * as ReactDOM from "react-dom";
 import { jsx as jsx172 } from "react/jsx-runtime";
-import * as React142 from "react";
+import * as React14 from "react";
 import * as React152 from "react";
 import { jsx as jsx182 } from "react/jsx-runtime";
 import * as React17 from "react";
-import * as React182 from "react";
+import * as React18 from "react";
 import { jsx as jsx192 } from "react/jsx-runtime";
 import * as React202 from "react";
 import * as React192 from "react";
@@ -16326,41 +16882,41 @@ import { useLayoutEffect as useLayoutEffect32, useEffect as useEffect82 } from "
 import * as ReactDOM2 from "react-dom";
 import * as React222 from "react";
 import { jsx as jsx202 } from "react/jsx-runtime";
-import * as React23 from "react";
+import * as React232 from "react";
 import { jsx as jsx212 } from "react/jsx-runtime";
 import * as React25 from "react";
 import ReactDOM3 from "react-dom";
 import { jsx as jsx223 } from "react/jsx-runtime";
 import * as React26 from "react";
 import * as React27 from "react";
-import * as React282 from "react";
+import * as React28 from "react";
 import { jsx as jsx232 } from "react/jsx-runtime";
-import * as React35 from "react";
-import * as React312 from "react";
+import * as React352 from "react";
+import * as React31 from "react";
 import { useState as useState112 } from "react";
 import * as React292 from "react";
-import * as React30 from "react";
+import * as React302 from "react";
 import * as React342 from "react";
 import * as React332 from "react";
 import * as React322 from "react";
 import { Fragment as Fragment8, jsx as jsx242, jsxs as jsxs4 } from "react/jsx-runtime";
 import { forwardRef as forwardRef142, createElement as createElement7 } from "react";
 import { forwardRef as forwardRef132, createElement as createElement6 } from "react";
-import * as React372 from "react";
+import * as React37 from "react";
 import { jsx as jsx252, jsxs as jsxs5 } from "react/jsx-runtime";
 import { jsx as jsx262 } from "react/jsx-runtime";
 import * as React49 from "react";
 import * as React382 from "react";
 import { jsx as jsx272 } from "react/jsx-runtime";
 import * as React47 from "react";
-import React402 from "react";
-import * as React39 from "react";
+import React40 from "react";
+import * as React392 from "react";
 import { Fragment as Fragment22, jsx as jsx282 } from "react/jsx-runtime";
 import { jsx as jsx292 } from "react/jsx-runtime";
 import React210 from "react";
 import { jsx as jsx2102 } from "react/jsx-runtime";
 import * as React42 from "react";
-import * as React41 from "react";
+import * as React412 from "react";
 import * as React43 from "react";
 import * as ReactDOM5 from "react-dom";
 import { jsx as jsx302 } from "react/jsx-runtime";
@@ -16413,7 +16969,7 @@ function useComposedRefs(...refs) {
   return React3.useCallback(composeRefs(...refs), refs);
 }
 var REACT_LAZY_TYPE = Symbol.for("react.lazy");
-var use = React22[" use ".trim().toString()];
+var use = React23[" use ".trim().toString()];
 function isPromiseLike(value) {
   return typeof value === "object" && value !== null && "then" in value;
 }
@@ -16422,25 +16978,25 @@ function isLazyComponent(element) {
 }
 function createSlot(ownerName) {
   const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
-  const Slot2 = React22.forwardRef((props, forwardedRef) => {
+  const Slot2 = React23.forwardRef((props, forwardedRef) => {
     let { children, ...slotProps } = props;
     if (isLazyComponent(children) && typeof use === "function") {
       children = use(children._payload);
     }
-    const childrenArray = React22.Children.toArray(children);
+    const childrenArray = React23.Children.toArray(children);
     const slottable = childrenArray.find(isSlottable);
     if (slottable) {
       const newElement = slottable.props.children;
       const newChildren = childrenArray.map((child) => {
         if (child === slottable) {
-          if (React22.Children.count(newElement) > 1)
-            return React22.Children.only(null);
-          return React22.isValidElement(newElement) ? newElement.props.children : null;
+          if (React23.Children.count(newElement) > 1)
+            return React23.Children.only(null);
+          return React23.isValidElement(newElement) ? newElement.props.children : null;
         } else {
           return child;
         }
       });
-      return /* @__PURE__ */ jsx39(SlotClone, { ...slotProps, ref: forwardedRef, children: React22.isValidElement(newElement) ? React22.cloneElement(newElement, undefined, newChildren) : null });
+      return /* @__PURE__ */ jsx39(SlotClone, { ...slotProps, ref: forwardedRef, children: React23.isValidElement(newElement) ? React23.cloneElement(newElement, undefined, newChildren) : null });
     }
     return /* @__PURE__ */ jsx39(SlotClone, { ...slotProps, ref: forwardedRef, children });
   });
@@ -16449,20 +17005,20 @@ function createSlot(ownerName) {
 }
 var Slot = /* @__PURE__ */ createSlot("Slot");
 function createSlotClone(ownerName) {
-  const SlotClone = React22.forwardRef((props, forwardedRef) => {
+  const SlotClone = React23.forwardRef((props, forwardedRef) => {
     let { children, ...slotProps } = props;
     if (isLazyComponent(children) && typeof use === "function") {
       children = use(children._payload);
     }
-    if (React22.isValidElement(children)) {
+    if (React23.isValidElement(children)) {
       const childrenRef = getElementRef(children);
       const props2 = mergeProps(slotProps, children.props);
-      if (children.type !== React22.Fragment) {
+      if (children.type !== React23.Fragment) {
         props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
       }
-      return React22.cloneElement(children, props2);
+      return React23.cloneElement(children, props2);
     }
-    return React22.Children.count(children) > 1 ? React22.Children.only(null) : null;
+    return React23.Children.count(children) > 1 ? React23.Children.only(null) : null;
   });
   SlotClone.displayName = `${ownerName}.SlotClone`;
   return SlotClone;
@@ -16478,7 +17034,7 @@ function createSlottable(ownerName) {
 }
 var Slottable = /* @__PURE__ */ createSlottable("Slottable");
 function isSlottable(child) {
-  return React22.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
+  return React23.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
 }
 function mergeProps(slotProps, childProps) {
   const overrideProps = { ...childProps };
@@ -16535,7 +17091,7 @@ var getChildNodeFrom = (htmlElement) => {
   return childNode;
 };
 var useHoverTransforms = (ref, disabled) => {
-  const [state, setState] = React33.useState({
+  const [state, setState] = React35.useState({
     progress: 0,
     isActive: false
   });
@@ -16547,7 +17103,7 @@ var useHoverTransforms = (ref, disabled) => {
       eventTarget.dispatchEvent(new Event("enabled"));
     }
   }, [disabled, eventTarget]);
-  React33.useEffect(() => {
+  React35.useEffect(() => {
     const element = ref.current;
     if (!element)
       return;
@@ -16622,8 +17178,8 @@ var useHoverTransforms = (ref, disabled) => {
   return state;
 };
 var useClickTransforms = (ref) => {
-  const [hoverProgress, setHoverProgress] = React33.useState(0);
-  React33.useEffect(() => {
+  const [hoverProgress, setHoverProgress] = React35.useState(0);
+  React35.useEffect(() => {
     const element = getChildNodeFrom(ref.current);
     if (!element) {
       return;
@@ -16807,7 +17363,7 @@ var Spinner = ({ size, duration }) => {
       height: size
     };
   }, [size]);
-  const pathsRef = useRef28([]);
+  const pathsRef = useRef29([]);
   useEffect23(() => {
     const animate = () => {
       const now = performance.now();
@@ -16853,7 +17409,7 @@ var Button = ({
   ...rest
 }) => {
   const [dimensions, setDimensions] = useState22(null);
-  const ref = useRef27(null);
+  const ref = useRef28(null);
   const { isActive, progress } = useHoverTransforms(ref, Boolean(disabled || loading));
   const onPointerEnter = useCallback25((e) => {
     if (e.pointerType !== "mouse") {
@@ -17351,7 +17907,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") {
@@ -17367,11 +17923,11 @@ function dispatchDiscreteCustomEvent(target, event) {
     ReactDOM.flushSync(() => target.dispatchEvent(event));
 }
 function useCallbackRef(callback) {
-  const callbackRef = React142.useRef(callback);
-  React142.useEffect(() => {
+  const callbackRef = React14.useRef(callback);
+  React14.useEffect(() => {
     callbackRef.current = callback;
   });
-  return React142.useMemo(() => (...args) => callbackRef.current?.(...args), []);
+  return React14.useMemo(() => (...args) => callbackRef.current?.(...args), []);
 }
 function useEscapeKeydown(onEscapeKeyDownProp, ownerDocument = globalThis?.document) {
   const onEscapeKeyDown = useCallbackRef(onEscapeKeyDownProp);
@@ -17390,12 +17946,12 @@ var CONTEXT_UPDATE = "dismissableLayer.update";
 var POINTER_DOWN_OUTSIDE = "dismissableLayer.pointerDownOutside";
 var FOCUS_OUTSIDE = "dismissableLayer.focusOutside";
 var originalBodyPointerEvents;
-var DismissableLayerContext = React16.createContext({
+var DismissableLayerContext = React162.createContext({
   layers: /* @__PURE__ */ new Set,
   layersWithOutsidePointerEventsDisabled: /* @__PURE__ */ new Set,
   branches: /* @__PURE__ */ new Set
 });
-var DismissableLayer = React16.forwardRef((props, forwardedRef) => {
+var DismissableLayer = React162.forwardRef((props, forwardedRef) => {
   const {
     disableOutsidePointerEvents = false,
     onEscapeKeyDown,
@@ -17405,10 +17961,10 @@ var DismissableLayer = React16.forwardRef((props, forwardedRef) => {
     onDismiss,
     ...layerProps
   } = props;
-  const context = React16.useContext(DismissableLayerContext);
-  const [node, setNode] = React16.useState(null);
+  const context = React162.useContext(DismissableLayerContext);
+  const [node, setNode] = React162.useState(null);
   const ownerDocument = node?.ownerDocument ?? globalThis?.document;
-  const [, force] = React16.useState({});
+  const [, force] = React162.useState({});
   const composedRefs = useComposedRefs2(forwardedRef, (node2) => setNode(node2));
   const layers = Array.from(context.layers);
   const [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1);
@@ -17446,7 +18002,7 @@ var DismissableLayer = React16.forwardRef((props, forwardedRef) => {
       onDismiss();
     }
   }, ownerDocument);
-  React16.useEffect(() => {
+  React162.useEffect(() => {
     if (!node)
       return;
     if (disableOutsidePointerEvents) {
@@ -17464,7 +18020,7 @@ var DismissableLayer = React16.forwardRef((props, forwardedRef) => {
       }
     };
   }, [node, ownerDocument, disableOutsidePointerEvents, context]);
-  React16.useEffect(() => {
+  React162.useEffect(() => {
     return () => {
       if (!node)
         return;
@@ -17473,7 +18029,7 @@ var DismissableLayer = React16.forwardRef((props, forwardedRef) => {
       dispatchUpdate();
     };
   }, [node, context]);
-  React16.useEffect(() => {
+  React162.useEffect(() => {
     const handleUpdate = () => force({});
     document.addEventListener(CONTEXT_UPDATE, handleUpdate);
     return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
@@ -17492,11 +18048,11 @@ var DismissableLayer = React16.forwardRef((props, forwardedRef) => {
 });
 DismissableLayer.displayName = DISMISSABLE_LAYER_NAME;
 var BRANCH_NAME = "DismissableLayerBranch";
-var DismissableLayerBranch = React16.forwardRef((props, forwardedRef) => {
-  const context = React16.useContext(DismissableLayerContext);
-  const ref = React16.useRef(null);
+var DismissableLayerBranch = React162.forwardRef((props, forwardedRef) => {
+  const context = React162.useContext(DismissableLayerContext);
+  const ref = React162.useRef(null);
   const composedRefs = useComposedRefs2(forwardedRef, ref);
-  React16.useEffect(() => {
+  React162.useEffect(() => {
     const node = ref.current;
     if (node) {
       context.branches.add(node);
@@ -17510,9 +18066,9 @@ var DismissableLayerBranch = React16.forwardRef((props, forwardedRef) => {
 DismissableLayerBranch.displayName = BRANCH_NAME;
 function usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis?.document) {
   const handlePointerDownOutside = useCallbackRef(onPointerDownOutside);
-  const isPointerInsideReactTreeRef = React16.useRef(false);
-  const handleClickRef = React16.useRef(() => {});
-  React16.useEffect(() => {
+  const isPointerInsideReactTreeRef = React162.useRef(false);
+  const handleClickRef = React162.useRef(() => {});
+  React162.useEffect(() => {
     const handlePointerDown = (event) => {
       if (event.target && !isPointerInsideReactTreeRef.current) {
         let handleAndDispatchPointerDownOutsideEvent2 = function() {
@@ -17547,8 +18103,8 @@ function usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis?
 }
 function useFocusOutside(onFocusOutside, ownerDocument = globalThis?.document) {
   const handleFocusOutside = useCallbackRef(onFocusOutside);
-  const isFocusInsideReactTreeRef = React16.useRef(false);
-  React16.useEffect(() => {
+  const isFocusInsideReactTreeRef = React162.useRef(false);
+  React162.useEffect(() => {
     const handleFocus = (event) => {
       if (event.target && !isFocusInsideReactTreeRef.current) {
         const eventDetail = { originalEvent: event };
@@ -17606,7 +18162,7 @@ var AUTOFOCUS_ON_MOUNT = "focusScope.autoFocusOnMount";
 var AUTOFOCUS_ON_UNMOUNT = "focusScope.autoFocusOnUnmount";
 var EVENT_OPTIONS = { bubbles: false, cancelable: true };
 var FOCUS_SCOPE_NAME = "FocusScope";
-var FocusScope = React182.forwardRef((props, forwardedRef) => {
+var FocusScope = React18.forwardRef((props, forwardedRef) => {
   const {
     loop = false,
     trapped = false,
@@ -17614,12 +18170,12 @@ var FocusScope = React182.forwardRef((props, forwardedRef) => {
     onUnmountAutoFocus: onUnmountAutoFocusProp,
     ...scopeProps
   } = props;
-  const [container22, setContainer] = React182.useState(null);
+  const [container22, setContainer] = React18.useState(null);
   const onMountAutoFocus = useCallbackRef(onMountAutoFocusProp);
   const onUnmountAutoFocus = useCallbackRef(onUnmountAutoFocusProp);
-  const lastFocusedElementRef = React182.useRef(null);
+  const lastFocusedElementRef = React18.useRef(null);
   const composedRefs = useComposedRefs2(forwardedRef, (node) => setContainer(node));
-  const focusScope = React182.useRef({
+  const focusScope = React18.useRef({
     paused: false,
     pause() {
       this.paused = true;
@@ -17628,7 +18184,7 @@ var FocusScope = React182.forwardRef((props, forwardedRef) => {
       this.paused = false;
     }
   }).current;
-  React182.useEffect(() => {
+  React18.useEffect(() => {
     if (trapped) {
       let handleFocusIn2 = function(event) {
         if (focusScope.paused || !container22)
@@ -17670,7 +18226,7 @@ var FocusScope = React182.forwardRef((props, forwardedRef) => {
       };
     }
   }, [trapped, container22, focusScope.paused]);
-  React182.useEffect(() => {
+  React18.useEffect(() => {
     if (container22) {
       focusScopesStack.add(focusScope);
       const previouslyFocusedElement = document.activeElement;
@@ -17701,7 +18257,7 @@ var FocusScope = React182.forwardRef((props, forwardedRef) => {
       };
     }
   }, [container22, onMountAutoFocus, onUnmountAutoFocus, focusScope]);
-  const handleKeyDown = React182.useCallback((event) => {
+  const handleKeyDown = React18.useCallback((event) => {
     if (!loop && !trapped)
       return;
     if (focusScope.paused)
@@ -19631,7 +20187,7 @@ var Arrow = React222.forwardRef((props, forwardedRef) => {
 Arrow.displayName = NAME;
 var Root2 = Arrow;
 function useSize(element) {
-  const [size4, setSize] = React23.useState(undefined);
+  const [size4, setSize] = React232.useState(undefined);
   useLayoutEffect22(() => {
     if (element) {
       setSize({ width: element.offsetWidth, height: element.offsetHeight });
@@ -19953,7 +20509,7 @@ function usePrevious(value) {
   }, [value]);
 }
 var NAME2 = "VisuallyHidden";
-var VisuallyHidden = React282.forwardRef((props, forwardedRef) => {
+var VisuallyHidden = React28.forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx232(Primitive.span, {
     ...props,
     ref: forwardedRef,
@@ -20283,7 +20839,7 @@ var SideCar = function(_a) {
   if (!Target) {
     throw new Error("Sidecar medium not found");
   }
-  return React30.createElement(Target, __assign({}, rest));
+  return React302.createElement(Target, __assign({}, rest));
 };
 SideCar.isSideCarExport = true;
 function exportSidecar(medium, exported) {
@@ -20294,9 +20850,9 @@ var effectCar = createSidecarMedium();
 var nothing = function() {
   return;
 };
-var RemoveScroll = React312.forwardRef(function(props, parentRef) {
-  var ref = React312.useRef(null);
-  var _a = React312.useState({
+var RemoveScroll = React31.forwardRef(function(props, parentRef) {
+  var ref = React31.useRef(null);
+  var _a = React31.useState({
     onScrollCapture: nothing,
     onWheelCapture: nothing,
     onTouchMoveCapture: nothing
@@ -20305,7 +20861,7 @@ var RemoveScroll = React312.forwardRef(function(props, parentRef) {
   var SideCar2 = sideCar;
   var containerRef = useMergeRefs([ref, parentRef]);
   var containerProps = __assign(__assign({}, rest), callbacks);
-  return React312.createElement(React312.Fragment, null, enabled && React312.createElement(SideCar2, { sideCar: effectCar, removeScrollBar, shards, noIsolation, inert, setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref, gapMode }), forwardProps ? React312.cloneElement(React312.Children.only(children), __assign(__assign({}, containerProps), { ref: containerRef })) : React312.createElement(Container, __assign({}, containerProps, { className, ref: containerRef }), children));
+  return React31.createElement(React31.Fragment, null, enabled && React31.createElement(SideCar2, { sideCar: effectCar, removeScrollBar, shards, noIsolation, inert, setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref, gapMode }), forwardProps ? React31.cloneElement(React31.Children.only(children), __assign(__assign({}, containerProps), { ref: containerRef })) : React31.createElement(Container, __assign({}, containerProps, { className, ref: containerRef }), children));
 });
 RemoveScroll.defaultProps = {
   enabled: true,
@@ -20764,8 +21320,8 @@ function getOutermostShadowParent(node) {
   return shadowParent;
 }
 var sidecar_default = exportSidecar(effectCar, RemoveScrollSideCar);
-var ReactRemoveScroll = React35.forwardRef(function(props, ref) {
-  return React35.createElement(RemoveScroll, __assign({}, props, { ref, sideCar: sidecar_default }));
+var ReactRemoveScroll = React352.forwardRef(function(props, ref) {
+  return React352.createElement(RemoveScroll, __assign({}, props, { ref, sideCar: sidecar_default }));
 });
 ReactRemoveScroll.classNames = RemoveScroll.classNames;
 var Combination_default = ReactRemoveScroll;
@@ -21771,7 +22327,7 @@ var ChevronDown = createLucideIcon("ChevronDown", [
 var ChevronUp = createLucideIcon("ChevronUp", [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]]);
 var Select2 = Root222;
 var SelectValue2 = Value;
-var SelectTrigger2 = React372.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs5(Trigger, {
+var SelectTrigger2 = React37.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs5(Trigger, {
   ref,
   className: cn("flex h-10 w-full items-center justify-between rounded-md border-black border-2 border-b-4 bg-card-bg px-3 py-5 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 font-brand", className),
   ...props,
@@ -21786,7 +22342,7 @@ var SelectTrigger2 = React372.forwardRef(({ className, children, ...props }, ref
   ]
 }));
 SelectTrigger2.displayName = Trigger.displayName;
-var SelectScrollUpButton2 = React372.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(ScrollUpButton, {
+var SelectScrollUpButton2 = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(ScrollUpButton, {
   ref,
   className: cn("flex cursor-default items-center justify-center py-1", className),
   ...props,
@@ -21795,7 +22351,7 @@ var SelectScrollUpButton2 = React372.forwardRef(({ className, ...props }, ref) =
   })
 }));
 SelectScrollUpButton2.displayName = ScrollUpButton.displayName;
-var SelectScrollDownButton2 = React372.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(ScrollDownButton, {
+var SelectScrollDownButton2 = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(ScrollDownButton, {
   ref,
   className: cn("flex cursor-default items-center justify-center py-1", className),
   ...props,
@@ -21804,7 +22360,7 @@ var SelectScrollDownButton2 = React372.forwardRef(({ className, ...props }, ref)
   })
 }));
 SelectScrollDownButton2.displayName = ScrollDownButton.displayName;
-var SelectContent2 = React372.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx252(Portal2, {
+var SelectContent2 = React37.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx252(Portal2, {
   children: /* @__PURE__ */ jsxs5(Content2, {
     ref,
     className: cn(" border-2 border-black relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md font-brand bg-card-bg text-text shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
@@ -21821,13 +22377,13 @@ var SelectContent2 = React372.forwardRef(({ className, children, position = "pop
   })
 }));
 SelectContent2.displayName = Content2.displayName;
-var SelectLabel2 = React372.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(Label, {
+var SelectLabel2 = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(Label, {
   ref,
   className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className),
   ...props
 }));
 SelectLabel2.displayName = Label.displayName;
-var SelectItem2 = React372.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs5(Item, {
+var SelectItem2 = React37.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs5(Item, {
   ref,
   className: cn("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-slate-200 dark:focus:bg-white/10 data-disabled:pointer-events-none data-disabled:opacity-50 font-brand", className),
   ...props,
@@ -21846,7 +22402,7 @@ var SelectItem2 = React372.forwardRef(({ className, children, ...props }, ref) =
   ]
 }));
 SelectItem2.displayName = Item.displayName;
-var SelectSeparator2 = React372.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(Separator, {
+var SelectSeparator2 = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx252(Separator, {
   ref,
   className: cn("-mx-1 my-1 h-px bg-muted", className),
   ...props
@@ -21935,22 +22491,22 @@ function composeContextScopes2(...scopes) {
 }
 function createSlot2(ownerName) {
   const SlotClone2 = /* @__PURE__ */ createSlotClone2(ownerName);
-  const Slot22 = React39.forwardRef((props, forwardedRef) => {
+  const Slot22 = React392.forwardRef((props, forwardedRef) => {
     const { children, ...slotProps } = props;
-    const childrenArray = React39.Children.toArray(children);
+    const childrenArray = React392.Children.toArray(children);
     const slottable = childrenArray.find(isSlottable3);
     if (slottable) {
       const newElement = slottable.props.children;
       const newChildren = childrenArray.map((child) => {
         if (child === slottable) {
-          if (React39.Children.count(newElement) > 1)
-            return React39.Children.only(null);
-          return React39.isValidElement(newElement) ? newElement.props.children : null;
+          if (React392.Children.count(newElement) > 1)
+            return React392.Children.only(null);
+          return React392.isValidElement(newElement) ? newElement.props.children : null;
         } else {
           return child;
         }
       });
-      return /* @__PURE__ */ jsx282(SlotClone2, { ...slotProps, ref: forwardedRef, children: React39.isValidElement(newElement) ? React39.cloneElement(newElement, undefined, newChildren) : null });
+      return /* @__PURE__ */ jsx282(SlotClone2, { ...slotProps, ref: forwardedRef, children: React392.isValidElement(newElement) ? React392.cloneElement(newElement, undefined, newChildren) : null });
     }
     return /* @__PURE__ */ jsx282(SlotClone2, { ...slotProps, ref: forwardedRef, children });
   });
@@ -21958,24 +22514,24 @@ function createSlot2(ownerName) {
   return Slot22;
 }
 function createSlotClone2(ownerName) {
-  const SlotClone2 = React39.forwardRef((props, forwardedRef) => {
+  const SlotClone2 = React392.forwardRef((props, forwardedRef) => {
     const { children, ...slotProps } = props;
-    if (React39.isValidElement(children)) {
+    if (React392.isValidElement(children)) {
       const childrenRef = getElementRef3(children);
       const props2 = mergeProps3(slotProps, children.props);
-      if (children.type !== React39.Fragment) {
+      if (children.type !== React392.Fragment) {
         props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
       }
-      return React39.cloneElement(children, props2);
+      return React392.cloneElement(children, props2);
     }
-    return React39.Children.count(children) > 1 ? React39.Children.only(null) : null;
+    return React392.Children.count(children) > 1 ? React392.Children.only(null) : null;
   });
   SlotClone2.displayName = `${ownerName}.SlotClone`;
   return SlotClone2;
 }
 var SLOTTABLE_IDENTIFIER2 = Symbol("radix.slottable");
 function isSlottable3(child) {
-  return React39.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER2;
+  return React392.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER2;
 }
 function mergeProps3(slotProps, childProps) {
   const overrideProps = { ...childProps };
@@ -22020,14 +22576,14 @@ function createCollection2(name) {
   const [CollectionProviderImpl, useCollectionContext] = createCollectionContext(PROVIDER_NAME, { collectionRef: { current: null }, itemMap: /* @__PURE__ */ new Map });
   const CollectionProvider = (props) => {
     const { scope, children } = props;
-    const ref = React402.useRef(null);
-    const itemMap = React402.useRef(/* @__PURE__ */ new Map).current;
+    const ref = React40.useRef(null);
+    const itemMap = React40.useRef(/* @__PURE__ */ new Map).current;
     return /* @__PURE__ */ jsx292(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
   };
   CollectionProvider.displayName = PROVIDER_NAME;
   const COLLECTION_SLOT_NAME = name + "CollectionSlot";
   const CollectionSlotImpl = createSlot2(COLLECTION_SLOT_NAME);
-  const CollectionSlot = React402.forwardRef((props, forwardedRef) => {
+  const CollectionSlot = React40.forwardRef((props, forwardedRef) => {
     const { scope, children } = props;
     const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
     const composedRefs = useComposedRefs(forwardedRef, context.collectionRef);
@@ -22037,12 +22593,12 @@ function createCollection2(name) {
   const ITEM_SLOT_NAME = name + "CollectionItemSlot";
   const ITEM_DATA_ATTR = "data-radix-collection-item";
   const CollectionItemSlotImpl = createSlot2(ITEM_SLOT_NAME);
-  const CollectionItemSlot = React402.forwardRef((props, forwardedRef) => {
+  const CollectionItemSlot = React40.forwardRef((props, forwardedRef) => {
     const { scope, children, ...itemData } = props;
-    const ref = React402.useRef(null);
+    const ref = React40.useRef(null);
     const composedRefs = useComposedRefs(forwardedRef, ref);
     const context = useCollectionContext(ITEM_SLOT_NAME, scope);
-    React402.useEffect(() => {
+    React40.useEffect(() => {
       context.itemMap.set(ref, { ref, ...itemData });
       return () => void context.itemMap.delete(ref);
     });
@@ -22051,7 +22607,7 @@ function createCollection2(name) {
   CollectionItemSlot.displayName = ITEM_SLOT_NAME;
   function useCollection2(scope) {
     const context = useCollectionContext(name + "CollectionConsumer", scope);
-    const getItems = React402.useCallback(() => {
+    const getItems = React40.useCallback(() => {
       const collectionNode = context.collectionRef.current;
       if (!collectionNode)
         return [];
@@ -22369,7 +22925,7 @@ function toSafeIndex(array, index2) {
 function toSafeInteger(number) {
   return number !== number || number === 0 ? 0 : Math.trunc(number);
 }
-var useLayoutEffect222 = globalThis?.document ? React41.useLayoutEffect : () => {};
+var useLayoutEffect222 = globalThis?.document ? React412.useLayoutEffect : () => {};
 var useReactId2 = React42[" useId ".trim().toString()] || (() => {
   return;
 });