@remotion/promo-pages 4.0.467 → 4.0.469

package/dist/Homepage.js

@@ -1,15 +1,26 @@
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
 var __defProp = Object.defineProperty;
-var __returnValue = (v) => v;
-function __exportSetter(name, newValue) {
-  this[name] = __returnValue.bind(null, newValue);
-}
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __toESM = (mod, isNodeMode, target) => {
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: () => mod[key],
+        enumerable: true
+      });
+  return to;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, {
       get: all[name],
       enumerable: true,
       configurable: true,
-      set: __exportSetter.bind(all, name)
+      set: (newValue) => all[name] = () => newValue
     });
 };
 var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
@@ -935,9 +946,9 @@ import {
   useContext as useContext17,
   useEffect as useEffect3,
   useMemo as useMemo14,
+  useRef as useRef6,
   useState as useState5
 } from "react";
-import { useRef as useRef6 } from "react";
 import { useContext as useContext14, useMemo as useMemo11 } from "react";
 import { createContext as createContext12 } from "react";
 import { useContext as useContext10, useMemo as useMemo9 } from "react";
@@ -976,7 +987,9 @@ import {
   forwardRef as forwardRef5,
   useCallback as useCallback7,
   useEffect as useEffect6,
+  useImperativeHandle as useImperativeHandle3,
   useMemo as useMemo17,
+  useRef as useRef10,
   useState as useState7
 } from "react";
 import { jsx as jsx14 } from "react/jsx-runtime";
@@ -987,17 +1000,17 @@ import {
   useContext as useContext18,
   useLayoutEffect as useLayoutEffect3,
   useMemo as useMemo18,
-  useRef as useRef10
+  useRef as useRef11
 } from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
 import { useContext as useContext19, useLayoutEffect as useLayoutEffect5, useState as useState9 } from "react";
 import {
   createContext as createContext17,
   useCallback as useCallback9,
-  useImperativeHandle as useImperativeHandle3,
+  useImperativeHandle as useImperativeHandle4,
   useLayoutEffect as useLayoutEffect4,
   useMemo as useMemo19,
-  useRef as useRef11,
+  useRef as useRef12,
   useState as useState8
 } from "react";
 import { jsx as jsx16 } from "react/jsx-runtime";
@@ -1014,24 +1027,24 @@ import React23, {
   forwardRef as forwardRef7,
   useContext as useContext29,
   useEffect as useEffect14,
-  useImperativeHandle as useImperativeHandle4,
+  useImperativeHandle as useImperativeHandle5,
   useMemo as useMemo29,
-  useRef as useRef19,
+  useRef as useRef20,
   useState as useState15
 } from "react";
-import { useContext as useContext22, useLayoutEffect as useLayoutEffect6, useRef as useRef14 } from "react";
+import { useContext as useContext22, useLayoutEffect as useLayoutEffect6, useRef as useRef15 } from "react";
 import React20, {
   createContext as createContext21,
   createRef as createRef2,
   useCallback as useCallback10,
   useContext as useContext21,
   useMemo as useMemo23,
-  useRef as useRef12,
+  useRef as useRef13,
   useState as useState11
 } from "react";
 import { useMemo as useMemo22 } from "react";
 import { jsx as jsx20, jsxs as jsxs22 } from "react/jsx-runtime";
-import { useRef as useRef13 } from "react";
+import { useRef as useRef14 } from "react";
 import { useContext as useContext24, useEffect as useEffect8, useMemo as useMemo24, useState as useState12 } from "react";
 import { useContext as useContext23 } from "react";
 import {
@@ -1039,9 +1052,9 @@ import {
   useContext as useContext27,
   useEffect as useEffect12,
   useLayoutEffect as useLayoutEffect8,
-  useRef as useRef18
+  useRef as useRef19
 } from "react";
-import { useCallback as useCallback12, useMemo as useMemo27, useRef as useRef16 } from "react";
+import { useCallback as useCallback12, useMemo as useMemo27, useRef as useRef17 } from "react";
 import { useContext as useContext26, useMemo as useMemo26 } from "react";
 import React21, {
   useCallback as useCallback11,
@@ -1049,13 +1062,13 @@ import React21, {
   useEffect as useEffect9,
   useLayoutEffect as useLayoutEffect7,
   useMemo as useMemo25,
-  useRef as useRef15,
+  useRef as useRef16,
   useState as useState13
 } from "react";
 import { jsx as jsx21 } from "react/jsx-runtime";
 import React22 from "react";
 import { useEffect as useEffect10, useState as useState14 } from "react";
-import { useEffect as useEffect11, useRef as useRef17 } from "react";
+import { useEffect as useEffect11, useRef as useRef18 } from "react";
 import { useEffect as useEffect13 } from "react";
 import { createContext as createContext22, useContext as useContext28, useMemo as useMemo28 } from "react";
 import { jsx as jsx222 } from "react/jsx-runtime";
@@ -1063,39 +1076,39 @@ import {
   forwardRef as forwardRef8,
   useContext as useContext30,
   useEffect as useEffect15,
-  useImperativeHandle as useImperativeHandle5,
+  useImperativeHandle as useImperativeHandle6,
   useLayoutEffect as useLayoutEffect9,
   useMemo as useMemo30,
-  useRef as useRef20
+  useRef as useRef21
 } from "react";
 import { jsx as jsx23 } from "react/jsx-runtime";
 import { jsx as jsx24 } from "react/jsx-runtime";
 import {
   forwardRef as forwardRef10,
-  useCallback as useCallback17,
-  useContext as useContext33,
+  useCallback as useCallback16,
+  useContext as useContext32,
   useEffect as useEffect16,
   useMemo as useMemo31,
   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 useCallback16,
-  useContext as useContext32,
-  useImperativeHandle as useImperativeHandle6,
+  useCallback as useCallback18,
+  useContext as useContext33,
+  useImperativeHandle as useImperativeHandle7,
   useLayoutEffect as useLayoutEffect10,
-  useRef as useRef21
+  useRef as useRef22
 } from "react";
-import { jsx as jsx25 } from "react/jsx-runtime";
-import { jsx as jsx26 } from "react/jsx-runtime";
-import { forwardRef as forwardRef11, useCallback as useCallback18, useState as useState17 } from "react";
 import { jsx as jsx27 } from "react/jsx-runtime";
 import { createRef as createRef3 } from "react";
 import React28 from "react";
 import {
   useCallback as useCallback19,
-  useImperativeHandle as useImperativeHandle7,
+  useImperativeHandle as useImperativeHandle8,
   useMemo as useMemo32,
-  useRef as useRef22,
+  useRef as useRef23,
   useState as useState18
 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
@@ -1120,9 +1133,9 @@ import React34, {
   forwardRef as forwardRef12,
   useContext as useContext36,
   useEffect as useEffect19,
-  useImperativeHandle as useImperativeHandle8,
+  useImperativeHandle as useImperativeHandle9,
   useMemo as useMemo36,
-  useRef as useRef23,
+  useRef as useRef24,
   useState as useState20,
   useCallback as useCallback21
 } from "react";
@@ -1142,25 +1155,21 @@ import {
   forwardRef as forwardRef14,
   useContext as useContext37,
   useEffect as useEffect20,
-  useImperativeHandle as useImperativeHandle9,
+  useImperativeHandle as useImperativeHandle10,
   useLayoutEffect as useLayoutEffect12,
   useMemo as useMemo39,
-  useRef as useRef24
+  useRef as useRef25
 } from "react";
 import { jsx as jsx37 } from "react/jsx-runtime";
 import { jsx as jsx38 } from "react/jsx-runtime";
 var __defProp2 = Object.defineProperty;
-var __returnValue2 = (v) => v;
-function __exportSetter2(name, newValue) {
-  this[name] = __returnValue2.bind(null, newValue);
-}
 var __export2 = (target, all) => {
   for (var name in all)
     __defProp2(target, name, {
       get: all[name],
       enumerable: true,
       configurable: true,
-      set: __exportSetter2.bind(all, name)
+      set: (newValue) => all[name] = () => newValue
     });
 };
 if (typeof createContext !== "function") {
@@ -2275,7 +2284,7 @@ var getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 var addSequenceStackTraces = (component) => {
   componentsToAddStacksTo.push(component);
 };
-var VERSION = "4.0.467";
+var VERSION = "4.0.469";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -3327,6 +3336,7 @@ var RegularSequenceRefForwardingFunction = ({
   _remotionInternalPremountDisplay: premountDisplay,
   _remotionInternalPostmountDisplay: postmountDisplay,
   _remotionInternalIsMedia: isMedia,
+  _remotionInternalRefForOutline: refForOutline,
   ...other
 }, ref) => {
   const { layout = "absolute-fill" } = other;
@@ -3364,10 +3374,16 @@ var RegularSequenceRefForwardingFunction = ({
   const postmounting = useMemo14(() => {
     return parentSequence?.postmounting || Boolean(other._remotionInternalIsPostmounting);
   }, [other._remotionInternalIsPostmounting, parentSequence?.postmounting]);
+  const currentSequenceStart = cumulatedFrom + from;
+  const parentSequenceStart = parentSequence ? parentSequence.cumulatedFrom + parentSequence.relativeFrom : 0;
+  const parentFirstFrame = parentSequence ? parentSequenceStart - parentSequence.cumulatedNegativeFrom : 0;
+  const firstFrame = Math.max(0, parentFirstFrame, currentSequenceStart);
+  const cumulatedNegativeFrom = currentSequenceStart - firstFrame;
   const contextValue = useMemo14(() => {
     return {
       cumulatedFrom,
       relativeFrom: from,
+      cumulatedNegativeFrom,
       durationInFrames: actualDurationInFrames,
       parentFrom: parentSequence?.relativeFrom ?? 0,
       id,
@@ -3389,7 +3405,8 @@ var RegularSequenceRefForwardingFunction = ({
     premounting,
     postmounting,
     premountDisplay,
-    postmountDisplay
+    postmountDisplay,
+    cumulatedNegativeFrom
   ]);
   const timelineClipName = useMemo14(() => {
     return name ?? "";
@@ -3422,7 +3439,8 @@ var RegularSequenceRefForwardingFunction = ({
           rootId,
           showInTimeline,
           src: isMedia.src,
-          getStack: () => stackRef.current
+          getStack: () => stackRef.current,
+          refForOutline: refForOutline ?? null
         });
       } else {
         registerSequence({
@@ -3446,7 +3464,8 @@ var RegularSequenceRefForwardingFunction = ({
           src: isMedia.data.src,
           getStack: () => stackRef.current,
           startMediaFrom: isMedia.data.startMediaFrom,
-          volume: isMedia.data.volumes
+          volume: isMedia.data.volumes,
+          refForOutline: refForOutline ?? null
         });
       }
       return () => {
@@ -3469,7 +3488,8 @@ var RegularSequenceRefForwardingFunction = ({
       premountDisplay: premountDisplay ?? null,
       postmountDisplay: postmountDisplay ?? null,
       controls: controls ?? null,
-      effects: _remotionInternalEffects ?? []
+      effects: _remotionInternalEffects ?? [],
+      refForOutline: refForOutline ?? null
     });
     return () => {
       unregisterSequence(id);
@@ -3494,7 +3514,8 @@ var RegularSequenceRefForwardingFunction = ({
     controls,
     _remotionInternalEffects,
     isMedia,
-    resolvedDocumentationLink
+    resolvedDocumentationLink,
+    refForOutline
   ]);
   const endThreshold = Math.ceil(cumulatedFrom + from + durationInFrames - 1);
   const content = absoluteFrame < cumulatedFrom + from ? null : absoluteFrame > endThreshold ? null : children;
@@ -4317,7 +4338,8 @@ var solidSchema = {
     default: 1080,
     description: "Height"
   },
-  ...sequenceVisualStyleSchema
+  ...sequenceVisualStyleSchema,
+  hidden: hiddenField
 };
 var SolidInner = ({
   color,
@@ -4327,7 +4349,7 @@ var SolidInner = ({
   className,
   style,
   overrideId,
-  ref
+  reference
 }) => {
   const { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
   const [outputCanvas, setOutputCanvas] = useState7(null);
@@ -4347,12 +4369,12 @@ var SolidInner = ({
   const chainState = useEffectChainState();
   const canvasRef = useCallback7((canvas) => {
     setOutputCanvas(canvas);
-    if (typeof ref === "function") {
-      ref(canvas);
-    } else if (ref) {
-      ref.current = canvas;
+    if (typeof reference === "function") {
+      reference(canvas);
+    } else if (reference) {
+      reference.current = canvas;
     }
-  }, [ref]);
+  }, [reference]);
   useEffect6(() => {
     if (!outputCanvas || !sourceCanvas) {
       return;
@@ -4427,6 +4449,10 @@ var SolidOuter = forwardRef5(({
   ...props
 }, ref) => {
   const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
+  const actualRef = useRef10(null);
+  useImperativeHandle3(ref, () => {
+    return actualRef.current;
+  }, []);
   return /* @__PURE__ */ jsx14(Sequence, {
     layout: "none",
     from,
@@ -4436,10 +4462,11 @@ var SolidOuter = forwardRef5(({
     _remotionInternalEffects: memoizedEffectDefinitions,
     durationInFrames,
     name: name ?? "<Solid>",
+    _remotionInternalRefForOutline: actualRef,
     _remotionInternalDocumentationLink: name === undefined ? "https://www.remotion.dev/docs/solid" : undefined,
     ...props,
     children: /* @__PURE__ */ jsx14(SolidInner, {
-      ref,
+      reference: actualRef,
       overrideId: controls?.overrideId ?? null,
       color,
       height,
@@ -4499,9 +4526,9 @@ var HtmlInCanvasContent = forwardRef6(({ width, height, effects, children, onPai
   if (!isHtmlInCanvasSupported()) {
     cancelRender2(new Error(HTML_IN_CANVAS_UNSUPPORTED_MESSAGE));
   }
-  const canvas2dRef = useRef10(null);
-  const offscreenRef = useRef10(null);
-  const divRef = useRef10(null);
+  const canvas2dRef = useRef11(null);
+  const offscreenRef = useRef11(null);
+  const divRef = useRef11(null);
   const canvasSizeKey = `${width}x${height}`;
   const setLayoutCanvasRef = useCallback8((node) => {
     canvas2dRef.current = node;
@@ -4516,15 +4543,15 @@ var HtmlInCanvasContent = forwardRef6(({ width, height, effects, children, onPai
     effects,
     overrideId: controls?.overrideId ?? null
   });
-  const effectsRef = useRef10(memoizedEffects);
+  const effectsRef = useRef11(memoizedEffects);
   effectsRef.current = memoizedEffects;
-  const onPaintRef = useRef10(onPaint);
+  const onPaintRef = useRef11(onPaint);
   onPaintRef.current = onPaint;
-  const onInitRef = useRef10(onInit);
+  const onInitRef = useRef11(onInit);
   onInitRef.current = onInit;
-  const initializedRef = useRef10(false);
-  const onInitCleanupRef = useRef10(null);
-  const unmountedRef = useRef10(false);
+  const initializedRef = useRef11(false);
+  const onInitCleanupRef = useRef11(null);
+  const unmountedRef = useRef11(false);
   const onPaintCb = useCallback8(async () => {
     const element = divRef.current;
     if (!element) {
@@ -4608,7 +4635,7 @@ var HtmlInCanvasContent = forwardRef6(({ width, height, effects, children, onPai
       onInitCleanupRef.current = null;
     };
   }, [onPaintCb, cancelRender2, width, height]);
-  const onPaintChangedRef = useRef10(false);
+  const onPaintChangedRef = useRef11(false);
   useLayoutEffect3(() => {
     if (!onPaintChangedRef.current) {
       onPaintChangedRef.current = true;
@@ -4746,14 +4773,14 @@ var RenderAssetManager = createContext17({
 });
 var RenderAssetManagerProvider = ({ children, collectAssets }) => {
   const [renderAssets, setRenderAssets] = useState8([]);
-  const renderAssetsRef = useRef11([]);
+  const renderAssetsRef = useRef12([]);
   const registerRenderAsset = useCallback9((renderAsset) => {
     validateRenderAsset(renderAsset);
     renderAssetsRef.current = [...renderAssetsRef.current, renderAsset];
     setRenderAssets(renderAssetsRef.current);
   }, []);
   if (collectAssets) {
-    useImperativeHandle3(collectAssets, () => {
+    useImperativeHandle4(collectAssets, () => {
       return {
         collectAssets: () => {
           const assets = renderAssetsRef.current;
@@ -5535,10 +5562,10 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled })
     latencyHint: audioLatencyHint,
     audioEnabled
   });
-  const audioContextIsPlayingEventually = useRef12(false);
-  const isResuming = useRef12(null);
+  const audioContextIsPlayingEventually = useRef13(false);
+  const isResuming = useRef13(null);
   const audioSyncAnchor = useMemo23(() => ({ value: 0 }), []);
-  const audioSyncAnchorListeners = useRef12([]);
+  const audioSyncAnchorListeners = useRef13([]);
   const audioSyncAnchorEmitter = useMemo23(() => {
     return {
       dispatch: (event) => {
@@ -5554,8 +5581,8 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled })
       }
     };
   }, []);
-  const prevEndTimes = useRef12({ scheduledEndTime: null, mediaEndTime: null });
-  const nodesToResume = useRef12(new Map);
+  const prevEndTimes = useRef13({ scheduledEndTime: null, mediaEndTime: null });
+  const nodesToResume = useRef13(new Map);
   const unscheduleAudioNode = useCallback10((node) => {
     nodesToResume.current.delete(node);
   }, []);
@@ -5679,7 +5706,7 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled })
   });
 };
 var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
-  const audios = useRef12([]);
+  const audios = useRef13([]);
   const [initialNumberOfAudioTags] = useState11(numberOfAudioTags);
   if (numberOfAudioTags !== initialNumberOfAudioTags) {
     throw new Error("The number of shared audio tags has changed dynamically. Once you have set this property, you cannot change it afterwards.");
@@ -5713,7 +5740,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
       });
     };
   }, [refs]);
-  const takenAudios = useRef12(new Array(numberOfAudioTags).fill(false));
+  const takenAudios = useRef13(new Array(numberOfAudioTags).fill(false));
   const rerenderAudios = useCallback10(() => {
     refs.forEach(({ ref, id }) => {
       const data = audios.current?.find((a) => a.id === id);
@@ -6000,9 +6027,9 @@ var useAppendVideoFragment = ({
   duration: initialDuration,
   fps
 }) => {
-  const actualFromRef = useRef13(initialActualFrom);
-  const actualDuration = useRef13(initialDuration);
-  const actualSrc = useRef13(initialActualSrc);
+  const actualFromRef = useRef14(initialActualFrom);
+  const actualDuration = useRef14(initialDuration);
+  const actualSrc = useRef14(initialActualSrc);
   if (!isSubsetOfDuration({
     prevStartFrom: actualFromRef.current,
     newStartFrom: initialActualFrom,
@@ -6039,8 +6066,8 @@ var useVolume = ({
   source,
   shouldUseWebAudioApi
 }) => {
-  const audioStuffRef = useRef14(null);
-  const currentVolumeRef = useRef14(volume);
+  const audioStuffRef = useRef15(null);
+  const currentVolumeRef = useRef15(volume);
   currentVolumeRef.current = volume;
   const sharedAudioContext = useContext22(SharedAudioContext);
   if (!sharedAudioContext) {
@@ -6108,8 +6135,7 @@ var useVolume = ({
 };
 var useMediaStartsAt = () => {
   const parentSequence = useContext23(SequenceContext);
-  const startsAt = Math.min(0, parentSequence?.relativeFrom ?? 0);
-  return startsAt;
+  return parentSequence?.cumulatedNegativeFrom ?? 0;
 };
 var useFrameForVolumeProp = (behavior) => {
   const loop = Loop.useLoop();
@@ -6266,7 +6292,8 @@ var useMediaInTimeline = ({
   premountDisplay,
   postmountDisplay,
   loopDisplay,
-  documentationLink
+  documentationLink,
+  refForOutline
 }) => {
   const parentSequence = useContext24(SequenceContext);
   const startsAt = useMediaStartsAt();
@@ -6318,7 +6345,8 @@ var useMediaInTimeline = ({
       premountDisplay,
       postmountDisplay,
       controls: null,
-      effects: []
+      effects: [],
+      refForOutline
     });
     return () => {
       unregisterSequence(id);
@@ -6344,7 +6372,8 @@ var useMediaInTimeline = ({
     documentationLink,
     rootId,
     finalDisplayName,
-    isStudio
+    isStudio,
+    refForOutline
   ]);
 };
 var useBufferManager = (logLevel, mountTime) => {
@@ -6353,7 +6382,7 @@ var useBufferManager = (logLevel, mountTime) => {
   const [onResumeCallbacks, setOnResumeCallbacks] = useState13([]);
   const env = useRemotionEnvironment();
   const rendering = env.isRendering;
-  const buffering = useRef15(false);
+  const buffering = useRef16(false);
   const addBlock = useCallback11((block) => {
     if (rendering) {
       return {
@@ -6500,7 +6529,7 @@ var useBufferUntilFirstFrame = ({
   logLevel,
   mountTime
 }) => {
-  const bufferingRef = useRef16(false);
+  const bufferingRef = useRef17(false);
   const { delayPlayback } = useBufferState();
   const bufferUntilFirstFrame = useCallback12((requestedTime) => {
     if (mediaType !== "video") {
@@ -6754,7 +6783,7 @@ var useRequestVideoCallbackTime = ({
   lastSeek,
   onVariableFpsVideoDetected
 }) => {
-  const currentTime = useRef17(null);
+  const currentTime = useRef18(null);
   useEffect11(() => {
     const { current } = mediaRef;
     if (current) {
@@ -6861,8 +6890,8 @@ function checkValidInputRange(arr) {
   }
 }
 function checkInfiniteRange(name, arr) {
-  if (arr.length < 2) {
-    throw new Error(name + " must have at least 2 elements");
+  if (arr.length < 1) {
+    throw new Error(name + " must have at least 1 element");
   }
   for (const element of arr) {
     if (typeof element !== "number") {
@@ -6929,6 +6958,9 @@ function interpolate(input, inputRange, outputRange, options) {
   if (typeof input !== "number") {
     throw new TypeError("Cannot interpolate an input which is not a number");
   }
+  if (inputRange.length === 1) {
+    return outputRange[0];
+  }
   const range = findRange(input, inputRange);
   return interpolateFunction(input, [inputRange[range], inputRange[range + 1]], [outputRange[range], outputRange[range + 1]], {
     easing: resolveEasingForSegment(range),
@@ -7011,14 +7043,14 @@ var useMediaPlayback = ({
   const buffering = useContext27(BufferingContextReact);
   const { fps } = useVideoConfig();
   const mediaStartsAt = useMediaStartsAt();
-  const lastSeekDueToShift = useRef18(null);
-  const lastSeek = useRef18(null);
+  const lastSeekDueToShift = useRef19(null);
+  const lastSeek = useRef19(null);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   if (!buffering) {
     throw new Error("useMediaPlayback must be used inside a <BufferingContext>");
   }
-  const isVariableFpsVideoMap = useRef18({});
+  const isVariableFpsVideoMap = useRef19({});
   const onVariableFpsVideoDetected = useCallback13(() => {
     if (!src) {
       return;
@@ -7426,7 +7458,8 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     premountDisplay: sequenceContext?.premountDisplay ?? null,
     postmountDisplay: sequenceContext?.postmountDisplay ?? null,
     loopDisplay: undefined,
-    documentationLink: name === undefined ? "https://www.remotion.dev/docs/html5-audio" : null
+    documentationLink: name === undefined ? "https://www.remotion.dev/docs/html5-audio" : null,
+    refForOutline: null
   });
   useMediaPlayback({
     mediaRef: audioRef,
@@ -7464,10 +7497,10 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
       });
     };
   }, [cleanupOnMediaTagUnmount]);
-  useImperativeHandle4(ref, () => {
+  useImperativeHandle5(ref, () => {
     return audioRef.current;
   }, [audioRef]);
-  const currentOnDurationCallback = useRef19(onDuration);
+  const currentOnDurationCallback = useRef20(onDuration);
   currentOnDurationCallback.current = onDuration;
   useEffect14(() => {
     const { current } = audioRef;
@@ -7498,7 +7531,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
 };
 var AudioForPreview = forwardRef7(AudioForDevelopmentForwardRefFunction);
 var AudioForRenderingRefForwardingFunction = (props, ref) => {
-  const audioRef = useRef20(null);
+  const audioRef = useRef21(null);
   const {
     volume: volumeProp,
     playbackRate,
@@ -7536,7 +7569,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
     mediaVolume: 1
   });
   warnAboutTooHighVolume(volume);
-  useImperativeHandle5(ref, () => {
+  useImperativeHandle6(ref, () => {
     return audioRef.current;
   }, []);
   useEffect15(() => {
@@ -7561,7 +7594,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
       mediaFrame: frame,
       playbackRate: props.playbackRate ?? 1,
       toneFrequency: toneFrequency ?? 1,
-      audioStartFrame: Math.max(0, -(sequenceContext?.relativeFrom ?? 0)),
+      audioStartFrame: Math.max(0, -(sequenceContext?.cumulatedNegativeFrom ?? 0)),
       audioStreamIndex: audioStreamIndex ?? 0
     });
     return () => unregisterRenderAsset(id);
@@ -7578,7 +7611,7 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
     playbackRate,
     props.playbackRate,
     toneFrequency,
-    sequenceContext?.relativeFrom,
+    sequenceContext?.cumulatedNegativeFrom,
     audioStreamIndex
   ]);
   const { src } = props;
@@ -7749,197 +7782,12 @@ var AudioRefForwardingFunction = (props, ref) => {
 var Html5Audio = forwardRef9(AudioRefForwardingFunction);
 addSequenceStackTraces(Html5Audio);
 var Audio = Html5Audio;
-function exponentialBackoff(errorCount) {
-  return 1000 * 2 ** (errorCount - 1);
-}
 function truncateSrcForLabel(src) {
   if (src.startsWith("data:") && src.length > 100) {
     return src.slice(0, 60) + "...[" + src.length + " chars total]";
   }
   return src;
 }
-var ImgContent = ({
-  onError,
-  maxRetries = 2,
-  src,
-  pauseWhenLoading,
-  delayRenderRetries,
-  delayRenderTimeoutInMilliseconds,
-  onImageFrame,
-  crossOrigin,
-  decoding,
-  ref,
-  ...props2
-}) => {
-  const imageRef = useRef21(null);
-  const errors = useRef21({});
-  const { delayPlayback } = useBufferState();
-  const sequenceContext = useContext32(SequenceContext);
-  const _propsValid = true;
-  if (!_propsValid) {
-    throw new Error("typecheck error");
-  }
-  useImperativeHandle6(ref, () => {
-    return imageRef.current;
-  }, []);
-  const actualSrc = usePreload(src);
-  const retryIn = useCallback16((timeout) => {
-    if (!imageRef.current) {
-      return;
-    }
-    const currentSrc = imageRef.current.src;
-    setTimeout(() => {
-      if (!imageRef.current) {
-        return;
-      }
-      const newSrc = imageRef.current?.src;
-      if (newSrc !== currentSrc) {
-        return;
-      }
-      imageRef.current.removeAttribute("src");
-      imageRef.current.setAttribute("src", newSrc);
-    }, timeout);
-  }, []);
-  const { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
-  const didGetError = useCallback16((e) => {
-    if (!errors.current) {
-      return;
-    }
-    errors.current[imageRef.current?.src] = (errors.current[imageRef.current?.src] ?? 0) + 1;
-    if (onError && (errors.current[imageRef.current?.src] ?? 0) > maxRetries) {
-      onError(e);
-      return;
-    }
-    if ((errors.current[imageRef.current?.src] ?? 0) <= maxRetries) {
-      const backoff = exponentialBackoff(errors.current[imageRef.current?.src] ?? 0);
-      console.warn(`Could not load image with source ${truncateSrcForLabel(imageRef.current?.src)}, retrying again in ${backoff}ms`);
-      retryIn(backoff);
-      return;
-    }
-    try {
-      cancelRender2("Error loading image with src: " + truncateSrcForLabel(imageRef.current?.src));
-    } catch {}
-  }, [cancelRender2, maxRetries, onError, retryIn]);
-  if (typeof window !== "undefined") {
-    const isPremounting = Boolean(sequenceContext?.premounting);
-    const isPostmounting = Boolean(sequenceContext?.postmounting);
-    useLayoutEffect10(() => {
-      if (window.process?.env?.NODE_ENV === "test") {
-        if (imageRef.current) {
-          imageRef.current.src = actualSrc;
-        }
-        return;
-      }
-      const { current } = imageRef;
-      if (!current) {
-        return;
-      }
-      const newHandle = delayRender2("Loading <Img> with src=" + truncateSrcForLabel(actualSrc), {
-        retries: delayRenderRetries ?? undefined,
-        timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
-      });
-      const unblock = pauseWhenLoading && !isPremounting && !isPostmounting ? delayPlayback().unblock : () => {
-        return;
-      };
-      let unmounted = false;
-      const onComplete = () => {
-        if (unmounted) {
-          continueRender2(newHandle);
-          return;
-        }
-        if ((errors.current[imageRef.current?.src] ?? 0) > 0) {
-          delete errors.current[imageRef.current?.src];
-          console.info(`Retry successful - ${truncateSrcForLabel(imageRef.current?.src)} is now loaded`);
-        }
-        if (current) {
-          onImageFrame?.(current);
-        }
-        unblock();
-        continueRender2(newHandle);
-      };
-      if (!imageRef.current) {
-        onComplete();
-        return;
-      }
-      current.src = actualSrc;
-      current.decode().then(onComplete).catch((err) => {
-        console.warn(err);
-        if (current.complete && current.naturalWidth > 0 && current.naturalHeight > 0) {
-          onComplete();
-        } else {
-          current.addEventListener("load", onComplete);
-        }
-      });
-      return () => {
-        unmounted = true;
-        current.removeEventListener("load", onComplete);
-        unblock();
-        continueRender2(newHandle);
-      };
-    }, [
-      actualSrc,
-      delayPlayback,
-      delayRenderRetries,
-      delayRenderTimeoutInMilliseconds,
-      pauseWhenLoading,
-      isPremounting,
-      isPostmounting,
-      onImageFrame,
-      continueRender2,
-      delayRender2
-    ]);
-  }
-  const { isClientSideRendering, isRendering } = useRemotionEnvironment();
-  const crossOriginValue = getCrossOriginValue({
-    crossOrigin,
-    requestsVideoFrame: false,
-    isClientSideRendering
-  });
-  return /* @__PURE__ */ jsx25("img", {
-    ...props2,
-    ref: imageRef,
-    crossOrigin: crossOriginValue,
-    onError: didGetError,
-    decoding: isRendering ? "sync" : decoding
-  });
-};
-var ImgInner = ({
-  hidden,
-  name,
-  stack,
-  showInTimeline,
-  src,
-  from,
-  durationInFrames,
-  _experimentalControls: controls,
-  ...props2
-}) => {
-  if (!src) {
-    throw new Error('No "src" prop was passed to <Img>.');
-  }
-  return /* @__PURE__ */ jsx25(Sequence, {
-    layout: "none",
-    from: from ?? 0,
-    durationInFrames: durationInFrames ?? Infinity,
-    _remotionInternalStack: stack,
-    _remotionInternalDocumentationLink: name === undefined ? "https://www.remotion.dev/docs/img" : undefined,
-    _remotionInternalIsMedia: { type: "image", src },
-    name: name ?? "<Img>",
-    _experimentalControls: controls,
-    showInTimeline: showInTimeline ?? true,
-    hidden,
-    children: /* @__PURE__ */ jsx25(ImgContent, {
-      src,
-      ...props2
-    })
-  });
-};
-var imgSchema = {
-  ...sequenceVisualStyleSchema,
-  hidden: hiddenField
-};
-var Img = wrapInSchema(ImgInner, imgSchema);
-addSequenceStackTraces(Img);
 var canvasImageSchema = {
   fit: {
     type: "enum",
@@ -8009,7 +7857,7 @@ var loadImage = ({
     image.src = src;
   });
 };
-function exponentialBackoff2(errorCount) {
+function exponentialBackoff(errorCount) {
   return 1000 * 2 ** (errorCount - 1);
 }
 var CanvasImageContent = forwardRef10(({
@@ -8026,7 +7874,8 @@ var CanvasImageContent = forwardRef10(({
   pauseWhenLoading,
   maxRetries = 2,
   delayRenderRetries,
-  delayRenderTimeoutInMilliseconds
+  delayRenderTimeoutInMilliseconds,
+  ...canvasProps
 }, ref) => {
   const { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
   const { delayPlayback } = useBufferState();
@@ -8037,14 +7886,14 @@ var CanvasImageContent = forwardRef10(({
     effects,
     overrideId: controls?.overrideId ?? null
   });
-  const sequenceContext = useContext33(SequenceContext);
+  const sequenceContext = useContext32(SequenceContext);
   const sourceCanvas = useMemo31(() => {
     if (typeof document === "undefined") {
       return null;
     }
     return document.createElement("canvas");
   }, []);
-  const canvasRef = useCallback17((canvas) => {
+  const canvasRef = useCallback16((canvas) => {
     setOutputCanvas(canvas);
     if (typeof ref === "function") {
       ref(canvas);
@@ -8116,7 +7965,7 @@ var CanvasImageContent = forwardRef10(({
         }
         errorCount++;
         if (errorCount <= maxRetries) {
-          const backoff = exponentialBackoff2(errorCount);
+          const backoff = exponentialBackoff(errorCount);
           console.warn(`Could not load <CanvasImage> with src="${truncateSrcForLabel(actualSrc)}", retrying in ${backoff}ms`);
           timeoutId = setTimeout(() => {
             if (!cancelled) {
@@ -8161,7 +8010,8 @@ var CanvasImageContent = forwardRef10(({
     sourceCanvas,
     width
   ]);
-  return /* @__PURE__ */ jsx26("canvas", {
+  return /* @__PURE__ */ jsx25("canvas", {
+    ...canvasProps,
     ref: canvasRef,
     width,
     height,
@@ -8191,24 +8041,27 @@ var CanvasImageInner = forwardRef10(({
   name,
   showInTimeline,
   stack,
-  _experimentalControls: controls
+  _experimentalControls: controls,
+  _remotionInternalDocumentationLink,
+  ...canvasProps
 }, ref) => {
   if (!src) {
     throw new Error('No "src" prop was passed to <CanvasImage>.');
   }
   const memoizedEffectDefinitions = useMemoizedEffectDefinitions(effects);
-  return /* @__PURE__ */ jsx26(Sequence, {
+  return /* @__PURE__ */ jsx25(Sequence, {
     layout: "none",
     from: from ?? 0,
     durationInFrames: durationInFrames ?? Infinity,
     hidden,
     showInTimeline: showInTimeline ?? true,
     name: name ?? "<CanvasImage>",
+    _remotionInternalDocumentationLink: _remotionInternalDocumentationLink ?? "https://www.remotion.dev/docs/canvasimage",
     _experimentalControls: controls,
     _remotionInternalEffects: memoizedEffectDefinitions,
     _remotionInternalIsMedia: { type: "image", src },
     _remotionInternalStack: stack,
-    children: /* @__PURE__ */ jsx26(CanvasImageContent, {
+    children: /* @__PURE__ */ jsx25(CanvasImageContent, {
       ref,
       src,
       width,
@@ -8223,7 +8076,8 @@ var CanvasImageInner = forwardRef10(({
       pauseWhenLoading,
       maxRetries,
       delayRenderRetries,
-      delayRenderTimeoutInMilliseconds
+      delayRenderTimeoutInMilliseconds,
+      ...canvasProps
     })
   });
 });
@@ -8244,11 +8098,11 @@ var IFrameRefForwarding = ({
     retries: delayRenderRetries ?? undefined,
     timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
   }));
-  const didLoad = useCallback18((e) => {
+  const didLoad = useCallback17((e) => {
     continueRender2(handle);
     onLoad?.(e);
   }, [handle, onLoad, continueRender2]);
-  const didGetError = useCallback18((e) => {
+  const didGetError = useCallback17((e) => {
     continueRender2(handle);
     if (onError) {
       onError(e);
@@ -8256,7 +8110,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__ */ jsx27("iframe", {
+  return /* @__PURE__ */ jsx26("iframe", {
     referrerPolicy: "strict-origin-when-cross-origin",
     ...props2,
     ref,
@@ -8265,6 +8119,316 @@ var IFrameRefForwarding = ({
   });
 };
 var IFrame = forwardRef11(IFrameRefForwarding);
+function exponentialBackoff2(errorCount) {
+  return 1000 * 2 ** (errorCount - 1);
+}
+var ImgContent = ({
+  onError,
+  maxRetries = 2,
+  src,
+  pauseWhenLoading,
+  delayRenderRetries,
+  delayRenderTimeoutInMilliseconds,
+  onImageFrame,
+  crossOrigin,
+  decoding,
+  ref,
+  ...props2
+}) => {
+  const imageRef = useRef22(null);
+  const errors = useRef22({});
+  const { delayPlayback } = useBufferState();
+  const sequenceContext = useContext33(SequenceContext);
+  const _propsValid = true;
+  if (!_propsValid) {
+    throw new Error("typecheck error");
+  }
+  useImperativeHandle7(ref, () => {
+    return imageRef.current;
+  }, []);
+  const actualSrc = usePreload(src);
+  const retryIn = useCallback18((timeout) => {
+    if (!imageRef.current) {
+      return;
+    }
+    const currentSrc = imageRef.current.src;
+    setTimeout(() => {
+      if (!imageRef.current) {
+        return;
+      }
+      const newSrc = imageRef.current?.src;
+      if (newSrc !== currentSrc) {
+        return;
+      }
+      imageRef.current.removeAttribute("src");
+      imageRef.current.setAttribute("src", newSrc);
+    }, timeout);
+  }, []);
+  const { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
+  const didGetError = useCallback18((e) => {
+    if (!errors.current) {
+      return;
+    }
+    errors.current[imageRef.current?.src] = (errors.current[imageRef.current?.src] ?? 0) + 1;
+    if (onError && (errors.current[imageRef.current?.src] ?? 0) > maxRetries) {
+      onError(e);
+      return;
+    }
+    if ((errors.current[imageRef.current?.src] ?? 0) <= maxRetries) {
+      const backoff = exponentialBackoff2(errors.current[imageRef.current?.src] ?? 0);
+      console.warn(`Could not load image with source ${truncateSrcForLabel(imageRef.current?.src)}, retrying again in ${backoff}ms`);
+      retryIn(backoff);
+      return;
+    }
+    try {
+      cancelRender2("Error loading image with src: " + truncateSrcForLabel(imageRef.current?.src));
+    } catch {}
+  }, [cancelRender2, maxRetries, onError, retryIn]);
+  if (typeof window !== "undefined") {
+    const isPremounting = Boolean(sequenceContext?.premounting);
+    const isPostmounting = Boolean(sequenceContext?.postmounting);
+    useLayoutEffect10(() => {
+      if (window.process?.env?.NODE_ENV === "test") {
+        if (imageRef.current) {
+          imageRef.current.src = actualSrc;
+        }
+        return;
+      }
+      const { current } = imageRef;
+      if (!current) {
+        return;
+      }
+      const newHandle = delayRender2("Loading <Img> with src=" + truncateSrcForLabel(actualSrc), {
+        retries: delayRenderRetries ?? undefined,
+        timeoutInMilliseconds: delayRenderTimeoutInMilliseconds ?? undefined
+      });
+      const unblock = pauseWhenLoading && !isPremounting && !isPostmounting ? delayPlayback().unblock : () => {
+        return;
+      };
+      let unmounted = false;
+      const onComplete = () => {
+        if (unmounted) {
+          continueRender2(newHandle);
+          return;
+        }
+        if ((errors.current[imageRef.current?.src] ?? 0) > 0) {
+          delete errors.current[imageRef.current?.src];
+          console.info(`Retry successful - ${truncateSrcForLabel(imageRef.current?.src)} is now loaded`);
+        }
+        if (current) {
+          onImageFrame?.(current);
+        }
+        unblock();
+        continueRender2(newHandle);
+      };
+      if (!imageRef.current) {
+        onComplete();
+        return;
+      }
+      current.src = actualSrc;
+      current.decode().then(onComplete).catch((err) => {
+        console.warn(err);
+        if (current.complete && current.naturalWidth > 0 && current.naturalHeight > 0) {
+          onComplete();
+        } else {
+          current.addEventListener("load", onComplete);
+        }
+      });
+      return () => {
+        unmounted = true;
+        current.removeEventListener("load", onComplete);
+        unblock();
+        continueRender2(newHandle);
+      };
+    }, [
+      actualSrc,
+      delayPlayback,
+      delayRenderRetries,
+      delayRenderTimeoutInMilliseconds,
+      pauseWhenLoading,
+      isPremounting,
+      isPostmounting,
+      onImageFrame,
+      continueRender2,
+      delayRender2
+    ]);
+  }
+  const { isClientSideRendering, isRendering } = useRemotionEnvironment();
+  const crossOriginValue = getCrossOriginValue({
+    crossOrigin,
+    requestsVideoFrame: false,
+    isClientSideRendering
+  });
+  return /* @__PURE__ */ jsx27("img", {
+    ...props2,
+    ref: imageRef,
+    crossOrigin: crossOriginValue,
+    onError: didGetError,
+    decoding: isRendering ? "sync" : decoding
+  });
+};
+var NativeImgInner = ({
+  hidden,
+  name,
+  stack,
+  showInTimeline,
+  src,
+  from,
+  durationInFrames,
+  _experimentalControls: controls,
+  ...props2
+}) => {
+  if (!src) {
+    throw new Error('No "src" prop was passed to <Img>.');
+  }
+  return /* @__PURE__ */ jsx27(Sequence, {
+    layout: "none",
+    from: from ?? 0,
+    durationInFrames: durationInFrames ?? Infinity,
+    _remotionInternalStack: stack,
+    _remotionInternalDocumentationLink: name === undefined ? "https://www.remotion.dev/docs/img" : undefined,
+    _remotionInternalIsMedia: { type: "image", src },
+    name: name ?? "<Img>",
+    _experimentalControls: controls,
+    showInTimeline: showInTimeline ?? true,
+    hidden,
+    children: /* @__PURE__ */ jsx27(ImgContent, {
+      src,
+      ...props2
+    })
+  });
+};
+var CanvasImageWithPrivateProps = CanvasImage;
+var imgSchema = {
+  ...sequenceVisualStyleSchema,
+  hidden: hiddenField
+};
+var imgCanvasFallbackIncompatibleProps = new Set([
+  "alt",
+  "crossOrigin",
+  "decoding",
+  "fetchPriority",
+  "loading",
+  "onError",
+  "onImageFrame",
+  "onLoad",
+  "sizes",
+  "srcSet",
+  "useMap"
+]);
+var getIncompatiblePropNames = (props2) => Object.keys(props2).filter((key) => props2[key] !== undefined && imgCanvasFallbackIncompatibleProps.has(key));
+var formatPropList = (props2) => {
+  return props2.map((prop) => `"${prop}"`).join(", ");
+};
+var validateCanvasImageFallbackProps = ({
+  props: props2,
+  ref,
+  width,
+  height
+}) => {
+  if (typeof width === "string" || typeof height === "string") {
+    throw new Error('The "width" and "height" props must be numbers on <Img> when effects are passed, because <Img> renders a <CanvasImage>. Use numeric props or CSS dimensions in "style".');
+  }
+  const conflictingProps = getIncompatiblePropNames(props2);
+  if (ref !== null && ref !== undefined) {
+    conflictingProps.unshift("ref");
+  }
+  if (conflictingProps.length === 0) {
+    return;
+  }
+  throw new Error(`The ${formatPropList(conflictingProps)} prop${conflictingProps.length === 1 ? "" : "s"} cannot be used on <Img> when effects are passed, because <Img> renders a <canvas> instead of a native <img>. Remove ${conflictingProps.length === 1 ? "this prop" : "these props"}.`);
+};
+var getFitFromObjectFit = (style) => {
+  const objectFit = style?.objectFit;
+  if (objectFit === "fill" || objectFit === "contain" || objectFit === "cover") {
+    return objectFit;
+  }
+  return;
+};
+var ImgInner = ({
+  effects = [],
+  ref,
+  hidden,
+  name,
+  stack,
+  showInTimeline,
+  src,
+  from,
+  durationInFrames,
+  _experimentalControls: controls,
+  width,
+  height,
+  className,
+  style,
+  id,
+  pauseWhenLoading,
+  maxRetries,
+  delayRenderRetries,
+  delayRenderTimeoutInMilliseconds,
+  ...props2
+}) => {
+  if (effects.length === 0) {
+    return /* @__PURE__ */ jsx27(NativeImgInner, {
+      ...props2,
+      ref,
+      hidden,
+      name,
+      stack,
+      showInTimeline,
+      src,
+      from,
+      durationInFrames,
+      _experimentalControls: controls,
+      width,
+      height,
+      className,
+      style,
+      id,
+      pauseWhenLoading,
+      maxRetries,
+      delayRenderRetries,
+      delayRenderTimeoutInMilliseconds
+    });
+  }
+  if (!src) {
+    throw new Error('No "src" prop was passed to <Img>.');
+  }
+  validateCanvasImageFallbackProps({
+    props: props2,
+    ref,
+    width,
+    height
+  });
+  const canvasWidth = typeof width === "number" ? width : undefined;
+  const canvasHeight = typeof height === "number" ? height : undefined;
+  const canvasProps = props2;
+  const canvasFit = getFitFromObjectFit(style) ?? "fill";
+  return /* @__PURE__ */ jsx27(CanvasImageWithPrivateProps, {
+    src,
+    width: canvasWidth,
+    height: canvasHeight,
+    fit: canvasFit,
+    effects,
+    className,
+    style,
+    id,
+    pauseWhenLoading,
+    maxRetries,
+    delayRenderRetries,
+    delayRenderTimeoutInMilliseconds,
+    from,
+    durationInFrames,
+    hidden,
+    name: name ?? "<Img>",
+    showInTimeline,
+    stack,
+    _remotionInternalDocumentationLink: name === undefined ? "https://www.remotion.dev/docs/img" : undefined,
+    _experimentalControls: controls,
+    ...canvasProps
+  });
+};
+var Img = wrapInSchema(ImgInner, imgSchema);
+addSequenceStackTraces(Img);
 var compositionsRef = React28.createRef();
 var CompositionManagerProvider = ({
   children,
@@ -8276,7 +8440,7 @@ var CompositionManagerProvider = ({
   const [folders, setFolders] = useState18([]);
   const [canvasContent, setCanvasContent] = useState18(initialCanvasContent);
   const [compositions, setCompositions] = useState18(initialCompositions);
-  const currentcompositionsRef = useRef22(compositions);
+  const currentcompositionsRef = useRef23(compositions);
   const updateCompositions = useCallback19((updateComps) => {
     setCompositions((comps) => {
       const updated = updateComps(comps);
@@ -8314,7 +8478,7 @@ var CompositionManagerProvider = ({
       return prevFolders.filter((p) => !(p.name === name && p.parent === parent));
     });
   }, []);
-  useImperativeHandle7(compositionsRef, () => {
+  useImperativeHandle8(compositionsRef, () => {
     return {
       getCompositions: () => currentcompositionsRef.current
     };
@@ -8839,7 +9003,7 @@ var OffthreadVideoForRendering = ({
       mediaFrame: frame,
       playbackRate,
       toneFrequency,
-      audioStartFrame: Math.max(0, -(sequenceContext?.relativeFrom ?? 0)),
+      audioStartFrame: Math.max(0, -(sequenceContext?.cumulatedNegativeFrom ?? 0)),
       audioStreamIndex
     });
     return () => unregisterRenderAsset(id);
@@ -8854,7 +9018,7 @@ var OffthreadVideoForRendering = ({
     absoluteFrame,
     playbackRate,
     toneFrequency,
-    sequenceContext?.relativeFrom,
+    sequenceContext?.cumulatedNegativeFrom,
     audioStreamIndex
   ]);
   const currentTime = useMemo35(() => {
@@ -9014,7 +9178,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   if (!context) {
     throw new Error("SharedAudioContext not found");
   }
-  const videoRef = useRef23(null);
+  const videoRef = useRef24(null);
   const sharedSource = useMemo36(() => {
     if (!context.audioContext) {
       return null;
@@ -9098,7 +9262,8 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     premountDisplay: parentSequence?.premountDisplay ?? null,
     postmountDisplay: parentSequence?.postmountDisplay ?? null,
     loopDisplay: undefined,
-    documentationLink: name === undefined ? onlyWarnForMediaSeekingError ? "https://www.remotion.dev/docs/offthreadvideo" : "https://www.remotion.dev/docs/html5-video" : null
+    documentationLink: name === undefined ? onlyWarnForMediaSeekingError ? "https://www.remotion.dev/docs/offthreadvideo" : "https://www.remotion.dev/docs/html5-video" : null,
+    refForOutline: videoRef
   });
   useMediaPlayback({
     mediaRef: videoRef,
@@ -9137,7 +9302,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     duration,
     fps
   });
-  useImperativeHandle8(ref, () => {
+  useImperativeHandle9(ref, () => {
     return videoRef.current;
   }, []);
   useState20(() => playbackLogging({
@@ -9186,7 +9351,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.removeEventListener("error", errorHandler);
     };
   }, [onError, src]);
-  const currentOnDurationCallback = useRef23(onDuration);
+  const currentOnDurationCallback = useRef24(onDuration);
   currentOnDurationCallback.current = onDuration;
   useEmitVideoFrame({ ref: videoRef, onVideoFrame });
   useEffect19(() => {
@@ -10207,7 +10372,7 @@ var VideoForRenderingForwardFunction = ({
   const frame = useCurrentFrame();
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const videoConfig = useUnsafeVideoConfig();
-  const videoRef = useRef24(null);
+  const videoRef = useRef25(null);
   const sequenceContext = useContext37(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
   const environment = useRemotionEnvironment();
@@ -10252,7 +10417,7 @@ var VideoForRenderingForwardFunction = ({
       mediaFrame: frame,
       playbackRate: playbackRate ?? 1,
       toneFrequency: toneFrequency ?? 1,
-      audioStartFrame: Math.max(0, -(sequenceContext?.relativeFrom ?? 0)),
+      audioStartFrame: Math.max(0, -(sequenceContext?.cumulatedNegativeFrom ?? 0)),
       audioStreamIndex: audioStreamIndex ?? 0
     });
     return () => unregisterRenderAsset(id);
@@ -10267,10 +10432,10 @@ var VideoForRenderingForwardFunction = ({
     absoluteFrame,
     playbackRate,
     toneFrequency,
-    sequenceContext?.relativeFrom,
+    sequenceContext?.cumulatedNegativeFrom,
     audioStreamIndex
   ]);
-  useImperativeHandle9(ref, () => {
+  useImperativeHandle10(ref, () => {
     return videoRef.current;
   }, []);
   useEffect20(() => {
@@ -10979,7 +11144,7 @@ var ExpertsPageContent = ({ Link }) => {
 import * as React24 from "react";
 import * as React8 from "react";
 import { Fragment as Fragment22, jsx as jsx45 } from "react/jsx-runtime";
-import React52, { useCallback as useCallback25, useRef as useRef25, useState as useState22 } from "react";
+import React52, { useCallback as useCallback25, useRef as useRef26, useState as useState22 } from "react";
 
 // ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -16661,7 +16826,7 @@ var extrudeAndTransformElement = (options) => {
 // ../design/dist/esm/index.mjs
 import { jsx as jsx212, Fragment as Fragment3 } from "react/jsx-runtime";
 import { jsx as jsx312, jsxs as jsxs6 } from "react/jsx-runtime";
-import { useEffect as useEffect22, useMemo as useMemo210, useRef as useRef26 } from "react";
+import { useEffect as useEffect22, useMemo as useMemo210, useRef as useRef27 } from "react";
 import { jsx as jsx46 } from "react/jsx-runtime";
 import { jsx as jsx53, jsxs as jsxs23 } from "react/jsx-runtime";
 import React62 from "react";
@@ -16713,8 +16878,8 @@ import * as React282 from "react";
 import { jsx as jsx232 } from "react/jsx-runtime";
 import * as React35 from "react";
 import * as React312 from "react";
-import * as React292 from "react";
 import { useState as useState112 } from "react";
+import * as React292 from "react";
 import * as React30 from "react";
 import * as React342 from "react";
 import * as React332 from "react";
@@ -17183,7 +17348,7 @@ var Spinner = ({ size, duration }) => {
       height: size
     };
   }, [size]);
-  const pathsRef = useRef26([]);
+  const pathsRef = useRef27([]);
   useEffect22(() => {
     const animate = () => {
       const now = performance.now();
@@ -17229,7 +17394,7 @@ var Button = ({
   ...rest
 }) => {
   const [dimensions, setDimensions] = useState22(null);
-  const ref = useRef25(null);
+  const ref = useRef26(null);
   const { isActive, progress } = useHoverTransforms(ref, Boolean(disabled || loading));
   const onPointerEnter = useCallback25((e) => {
     if (e.pointerType !== "mouse") {
@@ -20469,7 +20634,7 @@ var hideOthers = function(originalTarget, parentNode, markerName) {
   return applyAttributeToOthers(targets, activeParentNode, markerName, "aria-hidden");
 };
 var __assign = function() {
-  __assign = Object.assign || function __assign2(t) {
+  __assign = Object.assign || function __assign(t) {
     for (var s, i = 1, n = arguments.length;i < n; i++) {
       s = arguments[i];
       for (var p in s)
@@ -22256,17 +22421,17 @@ function createContextScope2(scopeName, createContextScopeDeps = []) {
   let defaultContexts = [];
   function createContext32(rootComponentName, defaultContext) {
     const BaseContext = React382.createContext(defaultContext);
-    const index3 = defaultContexts.length;
+    const index2 = defaultContexts.length;
     defaultContexts = [...defaultContexts, defaultContext];
     const Provider = (props) => {
       const { scope, children, ...context } = props;
-      const Context = scope?.[scopeName]?.[index3] || BaseContext;
+      const Context = scope?.[scopeName]?.[index2] || BaseContext;
       const value = React382.useMemo(() => context, Object.values(context));
       return /* @__PURE__ */ jsx272(Context.Provider, { value, children });
     };
     Provider.displayName = rootComponentName + "Provider";
     function useContext222(consumerName, scope) {
-      const Context = scope?.[scopeName]?.[index3] || BaseContext;
+      const Context = scope?.[scopeName]?.[index2] || BaseContext;
       const context = React382.useContext(Context);
       if (context)
         return context;
@@ -22463,10 +22628,10 @@ var OrderedDict = class _OrderedDict extends Map {
     super.set(key, value);
     return this;
   }
-  insert(index3, key, value) {
+  insert(index2, key, value) {
     const has = this.has(key);
     const length2 = this.#keys.length;
-    const relativeIndex = toSafeInteger(index3);
+    const relativeIndex = toSafeInteger(index2);
     let actualIndex = relativeIndex >= 0 ? relativeIndex : length2 + relativeIndex;
     const safeIndex = actualIndex < 0 || actualIndex >= length2 ? -1 : actualIndex;
     if (safeIndex === this.size || has && safeIndex === this.size - 1 || safeIndex === -1) {
@@ -22504,39 +22669,39 @@ var OrderedDict = class _OrderedDict extends Map {
     }
     return this;
   }
-  with(index3, key, value) {
+  with(index2, key, value) {
     const copy = new _OrderedDict(this);
-    copy.insert(index3, key, value);
+    copy.insert(index2, key, value);
     return copy;
   }
   before(key) {
-    const index3 = this.#keys.indexOf(key) - 1;
-    if (index3 < 0) {
+    const index2 = this.#keys.indexOf(key) - 1;
+    if (index2 < 0) {
       return;
     }
-    return this.entryAt(index3);
+    return this.entryAt(index2);
   }
   setBefore(key, newKey, value) {
-    const index3 = this.#keys.indexOf(key);
-    if (index3 === -1) {
+    const index2 = this.#keys.indexOf(key);
+    if (index2 === -1) {
       return this;
     }
-    return this.insert(index3, newKey, value);
+    return this.insert(index2, newKey, value);
   }
   after(key) {
-    let index3 = this.#keys.indexOf(key);
-    index3 = index3 === -1 || index3 === this.size - 1 ? -1 : index3 + 1;
-    if (index3 === -1) {
+    let index2 = this.#keys.indexOf(key);
+    index2 = index2 === -1 || index2 === this.size - 1 ? -1 : index2 + 1;
+    if (index2 === -1) {
       return;
     }
-    return this.entryAt(index3);
+    return this.entryAt(index2);
   }
   setAfter(key, newKey, value) {
-    const index3 = this.#keys.indexOf(key);
-    if (index3 === -1) {
+    const index2 = this.#keys.indexOf(key);
+    if (index2 === -1) {
       return this;
     }
-    return this.insert(index3 + 1, newKey, value);
+    return this.insert(index2 + 1, newKey, value);
   }
   first() {
     return this.entryAt(0);
@@ -22555,21 +22720,21 @@ var OrderedDict = class _OrderedDict extends Map {
     }
     return deleted;
   }
-  deleteAt(index3) {
-    const key = this.keyAt(index3);
+  deleteAt(index2) {
+    const key = this.keyAt(index2);
     if (key !== undefined) {
       return this.delete(key);
     }
     return false;
   }
-  at(index3) {
-    const key = at(this.#keys, index3);
+  at(index2) {
+    const key = at(this.#keys, index2);
     if (key !== undefined) {
       return this.get(key);
     }
   }
-  entryAt(index3) {
-    const key = at(this.#keys, index3);
+  entryAt(index2) {
+    const key = at(this.#keys, index2);
     if (key !== undefined) {
       return [key, this.get(key)];
     }
@@ -22577,15 +22742,15 @@ var OrderedDict = class _OrderedDict extends Map {
   indexOf(key) {
     return this.#keys.indexOf(key);
   }
-  keyAt(index3) {
-    return at(this.#keys, index3);
+  keyAt(index2) {
+    return at(this.#keys, index2);
   }
   from(key, offset4) {
-    const index3 = this.indexOf(key);
-    if (index3 === -1) {
+    const index2 = this.indexOf(key);
+    if (index2 === -1) {
       return;
     }
-    let dest = index3 + offset4;
+    let dest = index2 + offset4;
     if (dest < 0)
       dest = 0;
     if (dest >= this.size)
@@ -22593,11 +22758,11 @@ var OrderedDict = class _OrderedDict extends Map {
     return this.at(dest);
   }
   keyFrom(key, offset4) {
-    const index3 = this.indexOf(key);
-    if (index3 === -1) {
+    const index2 = this.indexOf(key);
+    if (index2 === -1) {
       return;
     }
-    let dest = index3 + offset4;
+    let dest = index2 + offset4;
     if (dest < 0)
       dest = 0;
     if (dest >= this.size)
@@ -22605,68 +22770,68 @@ var OrderedDict = class _OrderedDict extends Map {
     return this.keyAt(dest);
   }
   find(predicate, thisArg) {
-    let index3 = 0;
+    let index2 = 0;
     for (const entry of this) {
-      if (Reflect.apply(predicate, thisArg, [entry, index3, this])) {
+      if (Reflect.apply(predicate, thisArg, [entry, index2, this])) {
         return entry;
       }
-      index3++;
+      index2++;
     }
     return;
   }
   findIndex(predicate, thisArg) {
-    let index3 = 0;
+    let index2 = 0;
     for (const entry of this) {
-      if (Reflect.apply(predicate, thisArg, [entry, index3, this])) {
-        return index3;
+      if (Reflect.apply(predicate, thisArg, [entry, index2, this])) {
+        return index2;
       }
-      index3++;
+      index2++;
     }
     return -1;
   }
   filter(predicate, thisArg) {
     const entries = [];
-    let index3 = 0;
+    let index2 = 0;
     for (const entry of this) {
-      if (Reflect.apply(predicate, thisArg, [entry, index3, this])) {
+      if (Reflect.apply(predicate, thisArg, [entry, index2, this])) {
         entries.push(entry);
       }
-      index3++;
+      index2++;
     }
     return new _OrderedDict(entries);
   }
   map(callbackfn, thisArg) {
     const entries = [];
-    let index3 = 0;
+    let index2 = 0;
     for (const entry of this) {
-      entries.push([entry[0], Reflect.apply(callbackfn, thisArg, [entry, index3, this])]);
-      index3++;
+      entries.push([entry[0], Reflect.apply(callbackfn, thisArg, [entry, index2, this])]);
+      index2++;
     }
     return new _OrderedDict(entries);
   }
   reduce(...args) {
     const [callbackfn, initialValue] = args;
-    let index3 = 0;
+    let index2 = 0;
     let accumulator = initialValue ?? this.at(0);
     for (const entry of this) {
-      if (index3 === 0 && args.length === 1) {
+      if (index2 === 0 && args.length === 1) {
         accumulator = entry;
       } else {
-        accumulator = Reflect.apply(callbackfn, this, [accumulator, entry, index3, this]);
+        accumulator = Reflect.apply(callbackfn, this, [accumulator, entry, index2, this]);
       }
-      index3++;
+      index2++;
     }
     return accumulator;
   }
   reduceRight(...args) {
     const [callbackfn, initialValue] = args;
     let accumulator = initialValue ?? this.at(-1);
-    for (let index3 = this.size - 1;index3 >= 0; index3--) {
-      const entry = this.at(index3);
-      if (index3 === this.size - 1 && args.length === 1) {
+    for (let index2 = this.size - 1;index2 >= 0; index2--) {
+      const entry = this.at(index2);
+      if (index2 === this.size - 1 && args.length === 1) {
         accumulator = entry;
       } else {
-        accumulator = Reflect.apply(callbackfn, this, [accumulator, entry, index3, this]);
+        accumulator = Reflect.apply(callbackfn, this, [accumulator, entry, index2, this]);
       }
     }
     return accumulator;
@@ -22677,8 +22842,8 @@ var OrderedDict = class _OrderedDict extends Map {
   }
   toReversed() {
     const reversed = new _OrderedDict;
-    for (let index3 = this.size - 1;index3 >= 0; index3--) {
-      const key = this.keyAt(index3);
+    for (let index2 = this.size - 1;index2 >= 0; index2--) {
+      const key = this.keyAt(index2);
       const element = this.get(key);
       reversed.set(key, element);
     }
@@ -22701,44 +22866,44 @@ var OrderedDict = class _OrderedDict extends Map {
     if (end !== undefined && end > 0) {
       stop = end - 1;
     }
-    for (let index3 = start;index3 <= stop; index3++) {
-      const key = this.keyAt(index3);
+    for (let index2 = start;index2 <= stop; index2++) {
+      const key = this.keyAt(index2);
       const element = this.get(key);
       result.set(key, element);
     }
     return result;
   }
   every(predicate, thisArg) {
-    let index3 = 0;
+    let index2 = 0;
     for (const entry of this) {
-      if (!Reflect.apply(predicate, thisArg, [entry, index3, this])) {
+      if (!Reflect.apply(predicate, thisArg, [entry, index2, this])) {
         return false;
       }
-      index3++;
+      index2++;
     }
     return true;
   }
   some(predicate, thisArg) {
-    let index3 = 0;
+    let index2 = 0;
     for (const entry of this) {
-      if (Reflect.apply(predicate, thisArg, [entry, index3, this])) {
+      if (Reflect.apply(predicate, thisArg, [entry, index2, this])) {
         return true;
       }
-      index3++;
+      index2++;
     }
     return false;
   }
 };
-function at(array, index3) {
+function at(array, index2) {
   if ("at" in Array.prototype) {
-    return Array.prototype.at.call(array, index3);
+    return Array.prototype.at.call(array, index2);
   }
-  const actualIndex = toSafeIndex(array, index3);
+  const actualIndex = toSafeIndex(array, index2);
   return actualIndex === -1 ? undefined : array[actualIndex];
 }
-function toSafeIndex(array, index3) {
+function toSafeIndex(array, index2) {
   const length2 = array.length;
-  const relativeIndex = toSafeInteger(index3);
+  const relativeIndex = toSafeInteger(index2);
   const actualIndex = relativeIndex >= 0 ? relativeIndex : length2 + relativeIndex;
   return actualIndex < 0 || actualIndex >= length2 ? -1 : actualIndex;
 }
@@ -22790,7 +22955,7 @@ var Primitive2 = NODES2.reduce((primitive, node) => {
   Node2.displayName = `Primitive.${node}`;
   return { ...primitive, [node]: Node2 };
 }, {});
-function useCallbackRef4(callback) {
+function useCallbackRef3(callback) {
   const callbackRef = React44.useRef(callback);
   React44.useEffect(() => {
     callbackRef.current = callback;
@@ -22894,7 +23059,7 @@ var RovingFocusGroupImpl = React47.forwardRef((props, forwardedRef) => {
     caller: GROUP_NAME2
   });
   const [isTabbingBackOut, setIsTabbingBackOut] = React47.useState(false);
-  const handleEntryFocus = useCallbackRef4(onEntryFocus);
+  const handleEntryFocus = useCallbackRef3(onEntryFocus);
   const getItems = useCollection2(__scopeRovingFocusGroup);
   const isClickFocusRef = React47.useRef(false);
   const [focusableItemsCount, setFocusableItemsCount] = React47.useState(0);
@@ -23047,7 +23212,7 @@ function focusFirst2(candidates, preventScroll = false) {
   }
 }
 function wrapArray2(array, startIndex) {
-  return array.map((_, index3) => array[(startIndex + index3) % array.length]);
+  return array.map((_, index2) => array[(startIndex + index2) % array.length]);
 }
 var Root3 = RovingFocusGroup;
 var Item2 = RovingFocusGroupItem;
@@ -25539,7 +25704,7 @@ var GitHubStars = () => {
             width: "45px"
           }),
           /* @__PURE__ */ jsx51(StatItemContent, {
-            content: "47k",
+            content: "48k",
             width: "80px",
             fontSize: "2.5rem",
             fontWeight: "bold"
@@ -25737,9 +25902,9 @@ import { useContext as useContext45, useLayoutEffect as useLayoutEffect17 } from
 import { jsx as jsx314 } from "react/jsx-runtime";
 import { useEffect as useEffect210, useState as useState210 } from "react";
 import { useLayoutEffect as useLayoutEffect23 } from "react";
-import { useContext as useContext46, useEffect as useEffect52, useRef as useRef43 } from "react";
-import { useEffect as useEffect310, useRef as useRef27 } from "react";
-import { useCallback as useCallback36, useContext as useContext310, useMemo as useMemo53, useRef as useRef44, useState as useState39 } from "react";
+import { useContext as useContext46, useEffect as useEffect52, useRef as useRef44 } from "react";
+import { useEffect as useEffect310, useRef as useRef28 } from "react";
+import { useCallback as useCallback36, useContext as useContext310, useMemo as useMemo53, useRef as useRef45, useState as useState39 } from "react";
 import { useEffect as useEffect42, useRef as useRef310 } from "react";
 import { useCallback as useCallback210, useEffect as useEffect62, useMemo as useMemo212, useState as useState42 } from "react";
 import {
@@ -25757,7 +25922,7 @@ import React102, {
   useCallback as useCallback102,
   useContext as useContext52,
   useEffect as useEffect122,
-  useImperativeHandle as useImperativeHandle10,
+  useImperativeHandle as useImperativeHandle11,
   useMemo as useMemo122,
   useRef as useRef102,
   useState as useState113
@@ -25840,8 +26005,8 @@ function checkValidInputRange2(arr) {
   }
 }
 function checkInfiniteRange2(name, arr) {
-  if (arr.length < 2) {
-    throw new Error(name + " must have at least 2 elements");
+  if (arr.length < 1) {
+    throw new Error(name + " must have at least 1 element");
   }
   for (const element of arr) {
     if (typeof element !== "number") {
@@ -25908,6 +26073,9 @@ function interpolate3(input, inputRange, outputRange, options2) {
   if (typeof input !== "number") {
     throw new TypeError("Cannot interpolate an input which is not a number");
   }
+  if (inputRange.length === 1) {
+    return outputRange[0];
+  }
   const range = findRange2(input, inputRange);
   return interpolateFunction2(input, [inputRange[range], inputRange[range + 1]], [outputRange[range], outputRange[range + 1]], {
     easing: resolveEasingForSegment(range),
@@ -27256,13 +27424,13 @@ var usePlayer = () => {
   const [playing, setPlaying, imperativePlaying] = Internals.Timeline.usePlayingState();
   const [hasPlayed, setHasPlayed] = useState39(false);
   const frame = Internals.Timeline.useTimelinePosition();
-  const playStart = useRef44(frame);
+  const playStart = useRef45(frame);
   const setFrame = Internals.Timeline.useTimelineSetFrame();
   const setTimelinePosition = Internals.Timeline.useTimelineSetFrame();
   const audioContext = useContext310(Internals.SharedAudioContext);
   const audioTagsContext = useContext310(Internals.SharedAudioTagsContext);
   const { audioAndVideoTags } = Internals.useTimelineContext();
-  const frameRef = useRef44(frame);
+  const frameRef = useRef45(frame);
   frameRef.current = frame;
   const video = Internals.useVideo();
   const config = Internals.useUnsafeVideoConfig();
@@ -27432,7 +27600,7 @@ var useBrowserMediaSession = ({
   playbackRate
 }) => {
   const { playing, pause, play, emitter, getCurrentFrame, seek: seek2 } = usePlayer();
-  const hasEverPlayed = useRef27(false);
+  const hasEverPlayed = useRef28(false);
   useEffect310(() => {
     if (playing) {
       hasEverPlayed.current = true;
@@ -27636,7 +27804,7 @@ var usePlayback = ({
   const sharedAudioContext = useContext46(Internals.SharedAudioContext);
   const logLevel = Internals.useLogLevel();
   const isBackgroundedRef = useIsBackgrounded();
-  const lastTimeUpdateTimestamp = useRef43(0);
+  const lastTimeUpdateTimestamp = useRef44(0);
   const context = useContext46(Internals.BufferingContextReact);
   if (!context) {
     throw new Error("Missing the buffering context. Most likely you have a Remotion version mismatch.");
@@ -29298,7 +29466,7 @@ var PlayerUI = ({
       stopped = true;
     };
   }, [bufferStateDelayInMilliseconds, player.emitter]);
-  useImperativeHandle10(ref, () => {
+  useImperativeHandle11(ref, () => {
     const methods = {
       play: player.play,
       pause: () => {
@@ -30306,7 +30474,7 @@ import {
   useCallback as useCallback51,
   useEffect as useEffect57,
   useMemo as useMemo67,
-  useRef as useRef55,
+  useRef as useRef56,
   useState as useState56
 } from "react";
 
@@ -30362,7 +30530,7 @@ function _isNativeReflectConstruct() {
   try {
     var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {}));
   } catch (t2) {}
-  return (_isNativeReflectConstruct = function _isNativeReflectConstruct2() {
+  return (_isNativeReflectConstruct = function _isNativeReflectConstruct() {
     return !!t;
   })();
 }
@@ -30380,7 +30548,7 @@ function _construct(t, e, r2) {
 // ../../node_modules/.bun/@babel+runtime@7.27.1/node_modules/@babel/runtime/helpers/esm/wrapNativeSuper.js
 function _wrapNativeSuper(t) {
   var r2 = typeof Map == "function" ? new Map : undefined;
-  return _wrapNativeSuper = function _wrapNativeSuper2(t2) {
+  return _wrapNativeSuper = function _wrapNativeSuper(t2) {
     if (t2 === null || !_isNativeFunction(t2))
       return t2;
     if (typeof t2 != "function")
@@ -31083,7 +31251,7 @@ function useColorMode() {
 // ../media/dist/esm/index.mjs
 import { useState as useState311 } from "react";
 import { useMemo as useMemo312 } from "react";
-import { useContext as useContext212, useEffect as useEffect43, useMemo as useMemo57, useRef as useRef46, useState as useState40 } from "react";
+import { useContext as useContext212, useEffect as useEffect43, useMemo as useMemo57, useRef as useRef47, useState as useState40 } from "react";
 import { ALL_FORMATS, Input as Input2, UrlSource } from "mediabunny";
 import { AudioBufferSink, InputDisposedError } from "mediabunny";
 import { CanvasSink } from "mediabunny";
@@ -33179,9 +33347,9 @@ var AudioForPreviewAssertedShowing = ({
 }) => {
   const videoConfig = useUnsafeVideoConfig2();
   const frame = useCurrentFrame();
-  const mediaPlayerRef = useRef46(null);
-  const initialTrimBeforeRef = useRef46(trimBefore);
-  const initialTrimAfterRef = useRef46(trimAfter);
+  const mediaPlayerRef = useRef47(null);
+  const initialTrimBeforeRef = useRef47(trimBefore);
+  const initialTrimAfterRef = useRef47(trimAfter);
   const [initialRequestInit] = useState40(requestInit);
   const [mediaPlayerReady, setMediaPlayerReady] = useState40(false);
   const [shouldFallbackToNativeAudio, setShouldFallbackToNativeAudio] = useState40(false);
@@ -33205,7 +33373,7 @@ var AudioForPreviewAssertedShowing = ({
     throw new TypeError("No `src` was passed to <NewAudioForPreview>.");
   }
   const currentTime = frame / videoConfig.fps;
-  const currentTimeRef = useRef46(currentTime);
+  const currentTimeRef = useRef47(currentTime);
   currentTimeRef.current = currentTime;
   const preloadedSrc = usePreload2(src);
   const parentSequence = useContext212(SequenceContext2);
@@ -33218,14 +33386,14 @@ var AudioForPreviewAssertedShowing = ({
   }
   const effectiveMuted = muted || mediaMuted || userPreferredVolume <= 0;
   const isPlayerBuffering = Internals.useIsPlayerBuffering(bufferingContext);
-  const initialPlaying = useRef46(playing && !isPlayerBuffering);
-  const initialIsPremounting = useRef46(isPremounting);
-  const initialIsPostmounting = useRef46(isPostmounting);
-  const initialGlobalPlaybackRate = useRef46(globalPlaybackRate);
-  const initialPlaybackRate = useRef46(playbackRate);
-  const initialMuted = useRef46(effectiveMuted);
-  const initialDurationInFrames = useRef46(videoConfig.durationInFrames);
-  const initialSequenceOffset = useRef46(sequenceOffset);
+  const initialPlaying = useRef47(playing && !isPlayerBuffering);
+  const initialIsPremounting = useRef47(isPremounting);
+  const initialIsPostmounting = useRef47(isPostmounting);
+  const initialGlobalPlaybackRate = useRef47(globalPlaybackRate);
+  const initialPlaybackRate = useRef47(playbackRate);
+  const initialMuted = useRef47(effectiveMuted);
+  const initialDurationInFrames = useRef47(videoConfig.durationInFrames);
+  const initialSequenceOffset = useRef47(sequenceOffset);
   useCommonEffects({
     mediaPlayerRef,
     mediaPlayerReady,
@@ -36611,12 +36779,12 @@ import {
   createRef as createRef4,
   useCallback as useCallback43,
   useEffect as useEffect48,
-  useRef as useRef50,
+  useRef as useRef51,
   useState as useState47
 } from "react";
 
 // src/components/homepage/Demo/Card.tsx
-import { useCallback as useCallback40, useRef as useRef47 } from "react";
+import { useCallback as useCallback40, useRef as useRef48 } from "react";
 
 // src/components/homepage/Demo/math.ts
 var paddingAndMargin = 20;
@@ -36714,7 +36882,7 @@ var Card2 = ({
   onClickRight
 }) => {
   const refToUse = refsToUse[index2];
-  const stopPrevious = useRef47([]);
+  const stopPrevious = useRef48([]);
   let newIndices = [...indices];
   const applyPositions = useCallback40((except) => {
     let stopped = false;
@@ -36979,13 +37147,13 @@ import {
   forwardRef as forwardRef37,
   useCallback as useCallback41,
   useEffect as useEffect47,
-  useImperativeHandle as useImperativeHandle12,
-  useRef as useRef49
+  useImperativeHandle as useImperativeHandle13,
+  useRef as useRef50
 } from "react";
 
 // ../lottie/dist/esm/index.mjs
 import lottie from "lottie-web";
-import { useEffect as useEffect45, useRef as useRef48, useState as useState44 } from "react";
+import { useEffect as useEffect45, useRef as useRef49, useState as useState44 } from "react";
 import { jsx as jsx68 } from "react/jsx-runtime";
 var getLottieMetadata = (animationData) => {
   const width2 = animationData.w;
@@ -37054,10 +37222,10 @@ var Lottie = ({
   }
   validatePlaybackRate2(playbackRate);
   validateLoop(loop);
-  const animationRef = useRef48(null);
-  const currentFrameRef = useRef48(null);
-  const containerRef = useRef48(null);
-  const onAnimationLoadedRef = useRef48(onAnimationLoaded);
+  const animationRef = useRef49(null);
+  const currentFrameRef = useRef49(null);
+  const containerRef = useRef49(null);
+  const onAnimationLoadedRef = useRef49(onAnimationLoaded);
   onAnimationLoadedRef.current = onAnimationLoaded;
   const { delayRender: delayRender2, continueRender } = useDelayRender();
   const [handle] = useState44(() => delayRender2("Waiting for Lottie animation to load"));
@@ -37257,10 +37425,10 @@ var emojiStyle = {
   top: "calc(50% - 50px)"
 };
 var EmojiCardRefFn = ({ emojiIndex }, ref) => {
-  const ref1 = useRef49(null);
-  const ref2 = useRef49(null);
-  const ref3 = useRef49(null);
-  const transforms = useRef49([-100, 0, 100]);
+  const ref1 = useRef50(null);
+  const ref2 = useRef50(null);
+  const ref3 = useRef50(null);
+  const transforms = useRef50([-100, 0, 100]);
   const onLeft = useCallback41(() => {
     if (!ref1.current || !ref2.current || !ref3.current) {
       return;
@@ -37294,7 +37462,7 @@ var EmojiCardRefFn = ({ emojiIndex }, ref) => {
       transforms: transforms.current
     });
   }, []);
-  useImperativeHandle12(ref, () => {
+  useImperativeHandle13(ref, () => {
     return {
       onLeft,
       onRight
@@ -37706,14 +37874,14 @@ var Cards = ({
   location,
   trending
 }) => {
-  const container4 = useRef50(null);
+  const container4 = useRef51(null);
   const [refs] = useState47(() => {
     return new Array(4).fill(true).map(() => {
       return createRef4();
     });
   });
-  const positions = useRef50(getInitialPositions());
-  const shouldBePositions = useRef50(getInitialPositions());
+  const positions = useRef51(getInitialPositions());
+  const shouldBePositions = useRef51(getInitialPositions());
   const { isRendering } = useRemotionEnvironment();
   useEffect48(() => {
     const { current } = container4;
@@ -37731,7 +37899,7 @@ var Cards = ({
       current.removeEventListener("click", onClick);
     };
   }, [onToggle]);
-  const ref = useRef50(null);
+  const ref = useRef51(null);
   const onLeft = useCallback43(() => {
     ref.current?.onRight();
     onRightPress();
@@ -37904,7 +38072,7 @@ import {
 import { BufferTarget, StreamTarget } from "mediabunny";
 
 // ../core/dist/esm/version.mjs
-var VERSION2 = "4.0.467";
+var VERSION2 = "4.0.469";
 
 // ../web-renderer/dist/esm/index.mjs
 import { AudioSample, VideoSample } from "mediabunny";
@@ -37912,7 +38080,7 @@ import { AudioSampleSource } from "mediabunny";
 import { createRef as createRef6 } from "react";
 import { flushSync as flushSync22 } from "react-dom";
 import ReactDOM6 from "react-dom/client";
-import { useImperativeHandle as useImperativeHandle13, useState as useState49 } from "react";
+import { useImperativeHandle as useImperativeHandle14, useState as useState49 } from "react";
 import { flushSync as flushSync3 } from "react-dom";
 import { jsx as jsx87 } from "react/jsx-runtime";
 import { jsx as jsx217 } from "react/jsx-runtime";
@@ -38544,7 +38712,7 @@ var UpdateTime = ({
   timeUpdater
 }) => {
   const [frame, setFrame] = useState49(initialFrame);
-  useImperativeHandle13(timeUpdater, () => ({
+  useImperativeHandle14(timeUpdater, () => ({
     update: (f) => {
       flushSync3(() => {
         setFrame(f);
@@ -42909,7 +43077,7 @@ var DragAndDropNudge = () => {
 };
 
 // src/components/homepage/Demo/PlayerSeekBar.tsx
-import { useCallback as useCallback48, useEffect as useEffect51, useMemo as useMemo66, useRef as useRef51, useState as useState51 } from "react";
+import { useCallback as useCallback48, useEffect as useEffect51, useMemo as useMemo66, useRef as useRef53, useState as useState51 } from "react";
 
 // src/components/homepage/layout/use-el-size.ts
 import { useCallback as useCallback47, useEffect as useEffect50, useMemo as useMemo64, useState as useState50 } from "react";
@@ -43038,7 +43206,7 @@ var PlayerSeekBar2 = ({
   outFrame,
   playerRef
 }) => {
-  const containerRef = useRef51(null);
+  const containerRef = useRef53(null);
   const barHovered = useHoverState2(containerRef, false);
   const size4 = useElementSize2(containerRef.current);
   const [playing, setPlaying] = useState51(false);
@@ -43187,7 +43355,7 @@ var PlayerSeekBar2 = ({
 };
 
 // src/components/homepage/Demo/PlayerVolume.tsx
-import { useCallback as useCallback49, useEffect as useEffect53, useRef as useRef53, useState as useState54 } from "react";
+import { useCallback as useCallback49, useEffect as useEffect53, useRef as useRef55, useState as useState54 } from "react";
 
 // src/components/homepage/Demo/icons.tsx
 import { jsx as jsx100 } from "react/jsx-runtime";
@@ -43247,7 +43415,7 @@ import { jsx as jsx101 } from "react/jsx-runtime";
 var PlayerVolume = ({ playerRef }) => {
   const [muted, setIsMuted] = useState54(() => playerRef.current?.isMuted() ?? true);
   const [isHovered, setIsHovered] = useState54(false);
-  const timerRef = useRef53(null);
+  const timerRef = useRef55(null);
   useEffect53(() => {
     const { current } = playerRef;
     if (!current) {
@@ -43536,7 +43704,7 @@ var playerWrapper = {
 var Demo = () => {
   const { colorMode } = useColorMode();
   const [data2, setData] = useState56(null);
-  const ref = useRef55(null);
+  const ref = useRef56(null);
   const [isFullscreen, setIsFullscreen] = useState56(false);
   const [cardOrder, setCardOrder] = useState56([0, 1, 2, 3]);
   const [emojiIndex, setEmojiIndex] = useState56(0);
@@ -43694,15 +43862,15 @@ var ClearButton = (props) => {
 
 // src/components/homepage/MuxVideo.tsx
 import Hls2 from "hls.js";
-import { forwardRef as forwardRef40, useEffect as useEffect59, useImperativeHandle as useImperativeHandle14, useRef as useRef57 } from "react";
+import { forwardRef as forwardRef40, useEffect as useEffect59, useImperativeHandle as useImperativeHandle15, useRef as useRef58 } from "react";
 
 // src/components/homepage/VideoPlayerWithControls.tsx
 import Hls from "hls.js";
 import"plyr/dist/plyr.css";
-import { forwardRef as forwardRef39, useCallback as useCallback53, useEffect as useEffect58, useRef as useRef56, useState as useState57 } from "react";
+import { forwardRef as forwardRef39, useCallback as useCallback53, useEffect as useEffect58, useRef as useRef57, useState as useState57 } from "react";
 import { jsx as jsx114 } from "react/jsx-runtime";
 var useCombinedRefs = function(...refs) {
-  const targetRef = useRef56(null);
+  const targetRef = useRef57(null);
   useEffect58(() => {
     refs.forEach((ref) => {
       if (!ref)
@@ -43717,9 +43885,9 @@ var useCombinedRefs = function(...refs) {
   return targetRef;
 };
 var VideoPlayerWithControls = forwardRef39(({ playbackId, poster, currentTime, onLoaded, onError, onSize, autoPlay }, ref) => {
-  const videoRef = useRef56(null);
+  const videoRef = useRef57(null);
   const metaRef = useCombinedRefs(ref, videoRef);
-  const playerRef = useRef56(null);
+  const playerRef = useRef57(null);
   const [playerInitTime] = useState57(Date.now());
   const videoError = useCallback53((event) => onError(event), [onError]);
   const onImageLoad = useCallback53((event) => {
@@ -43804,9 +43972,9 @@ var getVideoToPlayUrl = (muxId) => {
   return `https://stream.mux.com/${muxId}.m3u8`;
 };
 var MuxVideoForward = ({ muxId, ...props }, ref) => {
-  const videoRef = useRef57(null);
+  const videoRef = useRef58(null);
   const vidUrl = getVideoToPlayUrl(muxId);
-  useImperativeHandle14(ref, () => videoRef.current, []);
+  useImperativeHandle15(ref, () => videoRef.current, []);
   useEffect59(() => {
     let hls;
     if (videoRef.current) {
@@ -44184,14 +44352,14 @@ var NewsletterButton = () => {
 };
 
 // src/components/homepage/ParameterizeAndEdit.tsx
-import { useEffect as useEffect63, useRef as useRef58, useState as useState61 } from "react";
+import { useEffect as useEffect63, useRef as useRef59, useState as useState61 } from "react";
 import { jsx as jsx121, jsxs as jsxs46 } from "react/jsx-runtime";
 var icon3 = {
   height: 16,
   marginLeft: 10
 };
 var ParameterizeAndEdit = () => {
-  const ref = useRef58(null);
+  const ref = useRef59(null);
   const [vid, setVid] = useState61("/img/editing-vp9-chrome.webm");
   useEffect63(() => {
     if (isWebkit()) {
@@ -44307,15 +44475,15 @@ var ParameterizeAndEdit = () => {
 };
 
 // src/components/homepage/RealMp4Videos.tsx
-import { useEffect as useEffect65, useRef as useRef59, useState as useState64 } from "react";
+import { useEffect as useEffect65, useRef as useRef60, useState as useState64 } from "react";
 import { jsx as jsx124, jsxs as jsxs47 } from "react/jsx-runtime";
 var icon4 = {
   height: 16,
   marginLeft: 10
 };
 var RealMP4Videos = () => {
-  const ref = useRef59(null);
-  const videoRef = useRef59(null);
+  const ref = useRef60(null);
+  const videoRef = useRef60(null);
   const [vid, setVid] = useState64("/img/render-progress.webm");
   useEffect65(() => {
     if (isWebkit()) {
@@ -44568,7 +44736,7 @@ var TrustedByBanner = () => {
 var TrustedByBanner_default = TrustedByBanner;
 
 // src/components/homepage/VideoAppsShowcase.tsx
-import { useRef as useRef60, useState as useState66 } from "react";
+import { useRef as useRef61, useState as useState66 } from "react";
 import { jsx as jsx127, jsxs as jsxs49 } from "react/jsx-runtime";
 var tabs = [
   "Music visualization",
@@ -44625,8 +44793,8 @@ var VideoAppsShowcase = () => {
   const [isMuted, setIsMuted] = useState66(true);
   const [isPlaying, setIsPlaying] = useState66(false);
   const [videoLoaded, setVideoLoaded] = useState66(false);
-  const videoRef = useRef60(null);
-  const containerRef = useRef60(null);
+  const videoRef = useRef61(null);
+  const containerRef = useRef61(null);
   const handleTabChange = (index2) => {
     const video = videoRef.current;
     if (video) {
@@ -46170,7 +46338,7 @@ var GithubButton = () => {
       " ",
       /* @__PURE__ */ jsx161("div", {
         className: "text-xs inline-block ml-2 leading-none mt-[3px] self-center",
-        children: "47k"
+        children: "48k"
       })
     ]
   });