remotion 4.0.494 → 4.0.496

package/dist/esm/index.mjs

@@ -1310,7 +1310,7 @@ var getSingleChildComponent = (children) => {
 };
 
 // src/version.ts
-var VERSION = "4.0.494";
+var VERSION = "4.0.496";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -1350,9 +1350,9 @@ var Null = () => {
 import {
   forwardRef as forwardRef3,
   useCallback as useCallback6,
-  useContext as useContext17,
+  useContext as useContext18,
   useEffect as useEffect3,
-  useMemo as useMemo14,
+  useMemo as useMemo15,
   useRef as useRef6,
   useState as useState5
 } from "react";
@@ -1862,15 +1862,19 @@ var premountSchema = {
     description: "Premount For",
     min: 0,
     step: 1,
-    hiddenFromList: false
+    hiddenFromList: false,
+    keyframable: false
   },
   postmountFor: {
     type: "number",
     default: 0,
     min: 0,
     step: 1,
-    hiddenFromList: true
-  },
+    hiddenFromList: true,
+    keyframable: false
+  }
+};
+var premountStyleSchema = {
   styleWhilePremounted: {
     type: "hidden"
   },
@@ -1878,10 +1882,13 @@ var premountSchema = {
     type: "hidden"
   }
 };
-var sequencePremountSchema = premountSchema;
+var sequencePremountSchema = {
+  ...premountSchema,
+  ...premountStyleSchema
+};
 var sequenceStyleSchema = {
   ...transformSchema,
-  ...premountSchema
+  ...sequencePremountSchema
 };
 var hiddenField = {
   type: "boolean",
@@ -1967,12 +1974,6 @@ var sequenceSchemaDefaultLayoutNone = {
   }
 };
 
-// src/PremountContext.tsx
-import { createContext as createContext14 } from "react";
-var PremountContext = createContext14({
-  premountFramesRemaining: 0
-});
-
 // src/SequenceManager.tsx
 import React12, { useCallback as useCallback5, useMemo as useMemo12, useRef as useRef4, useState as useState3 } from "react";
 import { jsx as jsx10 } from "react/jsx-runtime";
@@ -2157,9 +2158,9 @@ var SequenceManagerProvider = ({ children }) => {
 };
 
 // src/series/is-inside-series.tsx
-import React13, { createContext as createContext15 } from "react";
+import React13, { createContext as createContext14 } from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
-var IsInsideSeriesContext = createContext15(false);
+var IsInsideSeriesContext = createContext14(false);
 var IsInsideSeriesContainer = ({ children }) => {
   return /* @__PURE__ */ jsx11(IsInsideSeriesContext.Provider, {
     value: true,
@@ -2179,11 +2180,73 @@ var useRequireToBeInsideSeries = () => {
   }
 };
 
+// src/use-premounting.ts
+import { useContext as useContext15, useMemo as useMemo13 } from "react";
+
+// src/PremountContext.tsx
+import { createContext as createContext15 } from "react";
+var PremountContext = createContext15({
+  premountFramesRemaining: 0
+});
+
 // src/v5-flag.ts
 var ENABLE_V5_BREAKING_CHANGES = false;
 
+// src/use-premounting.ts
+var usePremounting = ({
+  from,
+  durationInFrames,
+  premountFor,
+  postmountFor,
+  style,
+  styleWhilePremounted,
+  styleWhilePostmounted,
+  hideWhilePremounted
+}) => {
+  const parentPremountContext = useContext15(PremountContext);
+  const frame = useCurrentFrame() - parentPremountContext.premountFramesRemaining;
+  const environment = useRemotionEnvironment();
+  const { fps } = useVideoConfig();
+  const effectivePremountFor = ENABLE_V5_BREAKING_CHANGES ? premountFor ?? fps : premountFor ?? 0;
+  const effectivePostmountFor = postmountFor ?? 0;
+  const endThreshold = Math.ceil(from + durationInFrames - 1);
+  const premountingActive = !environment.isRendering && frame < from && frame >= from - effectivePremountFor;
+  const postmountingActive = !environment.isRendering && frame > endThreshold && frame <= endThreshold + effectivePostmountFor;
+  const isPremountingOrPostmounting = premountingActive || postmountingActive;
+  const freezeFrame = premountingActive ? from : postmountingActive ? from + durationInFrames - 1 : 0;
+  const premountingStyle = useMemo13(() => {
+    if (!isPremountingOrPostmounting) {
+      return style;
+    }
+    return {
+      ...style,
+      ...hideWhilePremounted === "opacity" ? { opacity: 0 } : { display: "none" },
+      pointerEvents: "none",
+      ...premountingActive ? styleWhilePremounted : {},
+      ...postmountingActive ? styleWhilePostmounted : {}
+    };
+  }, [
+    isPremountingOrPostmounting,
+    hideWhilePremounted,
+    postmountingActive,
+    premountingActive,
+    style,
+    styleWhilePostmounted,
+    styleWhilePremounted
+  ]);
+  return {
+    effectivePremountFor,
+    effectivePostmountFor,
+    premountingActive,
+    postmountingActive,
+    isPremountingOrPostmounting,
+    freezeFrame,
+    premountingStyle
+  };
+};
+
 // src/with-interactivity-schema.ts
-import React14, { forwardRef as forwardRef2, useContext as useContext16, useMemo as useMemo13, useState as useState4 } from "react";
+import React14, { forwardRef as forwardRef2, useContext as useContext17, useMemo as useMemo14, useState as useState4 } from "react";
 
 // src/delete-nested-key.ts
 var deleteNestedKey = (obj, keysToRemove) => {
@@ -2219,7 +2282,7 @@ var deleteNestedKey = (obj, keysToRemove) => {
 };
 
 // src/effects/use-memoized-effects.ts
-import { useContext as useContext15, useRef as useRef5 } from "react";
+import { useContext as useContext16, useRef as useRef5 } from "react";
 
 // src/bezier.ts
 var NEWTON_ITERATIONS = 4;
@@ -4041,10 +4104,10 @@ var useMemoizedEffects = ({
   overrideId
 }) => {
   const previousRef = useRef5(null);
-  const { propStatuses } = useContext15(VisualModePropStatusesContext);
-  const { getEffectDragOverrides } = useContext15(VisualModeDragOverridesContext);
+  const { propStatuses } = useContext16(VisualModePropStatusesContext);
+  const { getEffectDragOverrides } = useContext16(VisualModeDragOverridesContext);
   const frame = useCurrentFrame();
-  const { overrideIdToNodePathMappings } = useContext15(OverrideIdsToNodePathsGettersContext);
+  const { overrideIdToNodePathMappings } = useContext16(OverrideIdsToNodePathsGettersContext);
   const previous = previousRef.current;
   const nodePath = overrideId ? overrideIdToNodePathMappings[overrideId] ?? null : null;
   const resolved = effects.map((descriptor, index) => {
@@ -4396,9 +4459,9 @@ var withInteractivitySchema = ({
         ref
       });
     }
-    const { propStatuses } = useContext16(VisualModePropStatusesContext);
-    const { getDragOverrides } = useContext16(VisualModeDragOverridesContext);
-    const nodePathMapping = useContext16(OverrideIdsToNodePathsGettersContext);
+    const { propStatuses } = useContext17(VisualModePropStatusesContext);
+    const { getDragOverrides } = useContext17(VisualModeDragOverridesContext);
+    const nodePathMapping = useContext17(OverrideIdsToNodePathsGettersContext);
     const frame = useCurrentFrame();
     if (props.controls) {
       return React14.createElement(Component, {
@@ -4425,8 +4488,8 @@ var withInteractivitySchema = ({
       key,
       props
     }));
-    const currentRuntimeValueDotNotation = useMemo13(() => readValuesFromProps(props, flatKeys, flatSchema), runtimeValues);
-    const controls = useMemo13(() => {
+    const currentRuntimeValueDotNotation = useMemo14(() => readValuesFromProps(props, flatKeys, flatSchema), runtimeValues);
+    const controls = useMemo14(() => {
       return {
         schema: schemaWithSequenceName,
         currentRuntimeValueDotNotation,
@@ -4436,7 +4499,7 @@ var withInteractivitySchema = ({
         componentName
       };
     }, [currentRuntimeValueDotNotation, overrideId]);
-    const { merged: valuesDotNotation, propsToDelete } = useMemo13(() => {
+    const { merged: valuesDotNotation, propsToDelete } = useMemo14(() => {
       return computeEffectiveSchemaValuesDotNotation({
         schema: schemaWithSequenceName,
         currentValue: currentRuntimeValueDotNotation,
@@ -4497,7 +4560,7 @@ var RegularSequenceRefForwardingFunction = ({
 }, ref) => {
   const { layout = "absolute-fill" } = other;
   const [id] = useState5(() => String(Math.random()));
-  const parentSequence = useContext17(SequenceContext);
+  const parentSequence = useContext18(SequenceContext);
   const { rootId } = useTimelineContext();
   const cumulatedFrom = parentSequence ? parentSequence.cumulatedFrom + parentSequence.relativeFrom : 0;
   const nonce = useNonce();
@@ -4548,13 +4611,13 @@ var RegularSequenceRefForwardingFunction = ({
   const absoluteFrom = (parentSequence?.absoluteFrom ?? 0) + effectiveRelativeFrom;
   const parentSequenceDuration = parentSequence ? Math.min(parentSequence.durationInFrames - effectiveRelativeFrom, durationInFrames) : durationInFrames;
   const actualDurationInFrames = Math.max(0, Math.min(videoConfig.durationInFrames - from, parentSequenceDuration));
-  const { registerSequence, unregisterSequence } = useContext17(SequenceManager);
+  const { registerSequence, unregisterSequence } = useContext18(SequenceManager);
   const wrapperRefForOutline = useRef6(null);
   const refForOutline = other.layout === "none" ? passedRefForOutline ?? null : passedRefForOutline ?? wrapperRefForOutline;
-  const premounting = useMemo14(() => {
+  const premounting = useMemo15(() => {
     return parentSequence?.premounting || Boolean(other._remotionInternalIsPremounting);
   }, [other._remotionInternalIsPremounting, parentSequence?.premounting]);
-  const postmounting = useMemo14(() => {
+  const postmounting = useMemo15(() => {
     return parentSequence?.postmounting || Boolean(other._remotionInternalIsPostmounting);
   }, [other._remotionInternalIsPostmounting, parentSequence?.postmounting]);
   const currentSequenceStart = cumulatedFrom + effectiveRelativeFrom;
@@ -4562,7 +4625,7 @@ var RegularSequenceRefForwardingFunction = ({
   const parentFirstFrame = parentSequence ? parentSequenceStart - parentSequence.cumulatedNegativeFrom : 0;
   const firstFrame = Math.max(0, parentFirstFrame, currentSequenceStart);
   const cumulatedNegativeFrom = currentSequenceStart - firstFrame;
-  const contextValue = useMemo14(() => {
+  const contextValue = useMemo15(() => {
     return {
       absoluteFrom,
       cumulatedFrom,
@@ -4593,12 +4656,12 @@ var RegularSequenceRefForwardingFunction = ({
     postmountDisplay,
     cumulatedNegativeFrom
   ]);
-  const timelineClipName = useMemo14(() => {
+  const timelineClipName = useMemo15(() => {
     return name ?? "";
   }, [name]);
   const resolvedDocumentationLink = documentationLink ?? "https://www.remotion.dev/docs/sequence";
   const env = useRemotionEnvironment();
-  const isInsideSeries = useContext17(IsInsideSeriesContext);
+  const isInsideSeries = useContext18(IsInsideSeriesContext);
   const inheritedStack = other?.stack ?? null;
   const stackRef = useRef6(null);
   stackRef.current = stack ?? inheritedStack;
@@ -4746,7 +4809,7 @@ var RegularSequenceRefForwardingFunction = ({
       ref.current = node;
     }
   }, [ref]);
-  const defaultStyle = useMemo14(() => {
+  const defaultStyle = useMemo15(() => {
     return {
       flexDirection: undefined,
       ...width ? { width } : {},
@@ -4772,8 +4835,6 @@ var RegularSequenceRefForwardingFunction = ({
 };
 var RegularSequence = forwardRef3(RegularSequenceRefForwardingFunction);
 var PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
-  const parentPremountContext = useContext17(PremountContext);
-  const frame = useCurrentFrame() - parentPremountContext.premountFramesRemaining;
   if (props.layout === "none") {
     throw new Error('`<Sequence>` with `premountFor` and `postmountFor` props does not support layout="none"');
   }
@@ -4787,34 +4848,30 @@ var PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
     styleWhilePostmounted,
     ...otherProps
   } = props;
-  const endThreshold = Math.ceil(from + durationInFrames - 1);
-  const premountingActive = frame < from && frame >= from - premountFor;
-  const postmountingActive = frame > endThreshold && frame <= endThreshold + postmountFor;
-  const freezeFrame = premountingActive ? from : postmountingActive ? from + durationInFrames - 1 : 0;
-  const isFreezingActive = premountingActive || postmountingActive;
-  const style = useMemo14(() => {
-    return {
-      ...passedStyle,
-      opacity: premountingActive || postmountingActive ? 0 : passedStyle?.opacity,
-      pointerEvents: premountingActive || postmountingActive ? "none" : passedStyle?.pointerEvents ?? undefined,
-      ...premountingActive ? styleWhilePremounted : {},
-      ...postmountingActive ? styleWhilePostmounted : {}
-    };
-  }, [
-    passedStyle,
-    premountingActive,
+  const {
+    freezeFrame,
+    isPremountingOrPostmounting,
     postmountingActive,
-    styleWhilePremounted,
-    styleWhilePostmounted
-  ]);
+    premountingActive,
+    premountingStyle
+  } = usePremounting({
+    from,
+    durationInFrames,
+    premountFor,
+    postmountFor,
+    style: passedStyle ?? null,
+    styleWhilePremounted: styleWhilePremounted ?? null,
+    styleWhilePostmounted: styleWhilePostmounted ?? null,
+    hideWhilePremounted: "opacity"
+  });
   return /* @__PURE__ */ jsx12(Freeze, {
     frame: freezeFrame,
-    active: isFreezingActive,
+    active: isPremountingOrPostmounting,
     children: /* @__PURE__ */ jsx12(SequenceInner, {
       ref,
       from,
       durationInFrames,
-      style,
+      style: premountingStyle ?? undefined,
       _remotionInternalPremountDisplay: premountFor,
       _remotionInternalPostmountDisplay: postmountFor,
       _remotionInternalIsPremounting: premountingActive,
@@ -4869,7 +4926,7 @@ import {
 } from "react";
 
 // src/animated-image/canvas.tsx
-import React16, { useCallback as useCallback7, useImperativeHandle, useMemo as useMemo16, useRef as useRef8 } from "react";
+import React16, { useCallback as useCallback7, useImperativeHandle, useMemo as useMemo17, useRef as useRef8 } from "react";
 
 // src/calculate-image-fit.ts
 var calculateImageFit = (fit, imageSize, canvasSize) => {
@@ -5165,7 +5222,7 @@ var runEffectChain = async ({
 };
 
 // src/effects/use-effect-chain-state.ts
-import { useEffect as useEffect4, useMemo as useMemo15, useRef as useRef7 } from "react";
+import { useEffect as useEffect4, useMemo as useMemo16, useRef as useRef7 } from "react";
 var useEffectChainState = () => {
   const chainStateRef = useRef7(null);
   const sizeRef = useRef7(null);
@@ -5176,7 +5233,7 @@ var useEffectChainState = () => {
       }
     };
   }, []);
-  return useMemo15(() => ({
+  return useMemo16(() => ({
     get: (width, height) => {
       if (!sizeRef.current || sizeRef.current.width !== width || sizeRef.current.height !== height) {
         if (chainStateRef.current) {
@@ -5195,7 +5252,7 @@ import { jsx as jsx13 } from "react/jsx-runtime";
 var CanvasRefForwardingFunction = ({ width, height, fit, className, style, effects, ...props }, ref) => {
   const canvasRef = useRef8(null);
   const chainState = useEffectChainState();
-  const sourceCanvas = useMemo16(() => {
+  const sourceCanvas = useMemo17(() => {
     if (typeof document === "undefined") {
       return null;
     }
@@ -5693,7 +5750,7 @@ var createEffect = (definition) => {
   return factory;
 };
 // src/Artifact.tsx
-import { useContext as useContext18, useLayoutEffect as useLayoutEffect4, useState as useState8 } from "react";
+import { useContext as useContext19, useLayoutEffect as useLayoutEffect4, useState as useState8 } from "react";
 
 // src/RenderAssetManager.tsx
 import {
@@ -5701,7 +5758,7 @@ import {
   useCallback as useCallback8,
   useImperativeHandle as useImperativeHandle3,
   useLayoutEffect as useLayoutEffect3,
-  useMemo as useMemo17,
+  useMemo as useMemo18,
   useRef as useRef10,
   useState as useState7
 } from "react";
@@ -5782,7 +5839,7 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
       };
     }
   }, []);
-  const contextValue = useMemo17(() => {
+  const contextValue = useMemo18(() => {
     return {
       registerRenderAsset,
       unregisterRenderAsset,
@@ -5798,7 +5855,7 @@ var RenderAssetManagerProvider = ({ children, collectAssets }) => {
 // src/Artifact.tsx
 var ArtifactThumbnail = Symbol("Thumbnail");
 var Artifact = ({ filename, content, downloadBehavior }) => {
-  const { registerRenderAsset, unregisterRenderAsset } = useContext18(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext19(RenderAssetManager);
   const env = useRemotionEnvironment();
   const frame = useCurrentFrame();
   const [id] = useState8(() => {
@@ -5855,7 +5912,7 @@ var Artifact = ({ filename, content, downloadBehavior }) => {
 };
 Artifact.Thumbnail = ArtifactThumbnail;
 // src/audio/html5-audio.tsx
-import { forwardRef as forwardRef7, useCallback as useCallback14, useContext as useContext30 } from "react";
+import { forwardRef as forwardRef7, useCallback as useCallback14, useContext as useContext31 } from "react";
 
 // src/absolute-src.ts
 var getAbsoluteSrc = (relativeSrc) => {
@@ -5887,7 +5944,7 @@ var calculateMediaDuration = ({
 };
 
 // src/loop/index.tsx
-import React17, { createContext as createContext18, useMemo as useMemo18 } from "react";
+import React17, { createContext as createContext18, useMemo as useMemo19 } from "react";
 import { jsx as jsx16 } from "react/jsx-runtime";
 var LoopContext = createContext18(null);
 var useLoop = () => {
@@ -5923,14 +5980,14 @@ var Loop = ({
   const iteration = Math.floor(currentFrame / durationInFrames);
   const start = iteration * durationInFrames;
   const from = Math.min(start, maxFrame);
-  const loopDisplay = useMemo18(() => {
+  const loopDisplay = useMemo19(() => {
     return {
       numberOfTimes: Math.min(compDuration / durationInFrames, times),
       startOffset: -from,
       durationInFrames
     };
   }, [compDuration, durationInFrames, from, times]);
-  const loopContext = useMemo18(() => {
+  const loopContext = useMemo19(() => {
     return {
       iteration: Math.floor(currentFrame / durationInFrames),
       durationInFrames
@@ -5954,7 +6011,7 @@ var Loop = ({
 Loop.useLoop = useLoop;
 
 // src/prefetch.ts
-import { useContext as useContext19 } from "react";
+import { useContext as useContext20 } from "react";
 
 // src/playback-logging.ts
 var playbackLogging = ({
@@ -6010,7 +6067,7 @@ var getSrcWithoutHash = (src) => {
   return src.slice(0, hashIndex);
 };
 var usePreload = (src) => {
-  const preloads2 = useContext19(PreloadContext);
+  const preloads2 = useContext20(PreloadContext);
   const hashFragmentIndex = removeAndGetHashFragment(src);
   const withoutHashFragment = getSrcWithoutHash(src);
   if (!preloads2[withoutHashFragment]) {
@@ -6295,7 +6352,7 @@ var resolveTrimProps = ({
 };
 
 // src/video/duration-state.tsx
-import { createContext as createContext20, useMemo as useMemo19, useReducer } from "react";
+import { createContext as createContext20, useMemo as useMemo20, useReducer } from "react";
 import { jsx as jsx18 } from "react/jsx-runtime";
 var durationReducer = (state, action) => {
   switch (action.type) {
@@ -6321,7 +6378,7 @@ var DurationsContext = createContext20({
 });
 var DurationsContextProvider = ({ children }) => {
   const [durations, setDurations] = useReducer(durationReducer, {});
-  const value = useMemo19(() => {
+  const value = useMemo20(() => {
     return {
       durations,
       setDurations
@@ -6337,10 +6394,10 @@ var DurationsContextProvider = ({ children }) => {
 import { useCallback as useCallback13 } from "react";
 import React23, {
   forwardRef as forwardRef5,
-  useContext as useContext28,
+  useContext as useContext29,
   useEffect as useEffect14,
   useImperativeHandle as useImperativeHandle4,
-  useMemo as useMemo27,
+  useMemo as useMemo28,
   useRef as useRef19,
   useState as useState14
 } from "react";
@@ -6364,16 +6421,16 @@ var getCrossOriginValue = ({
 };
 
 // src/use-amplification.ts
-import { useContext as useContext21, useLayoutEffect as useLayoutEffect5, useRef as useRef14 } from "react";
+import { useContext as useContext22, useLayoutEffect as useLayoutEffect5, useRef as useRef14 } from "react";
 
 // src/audio/shared-audio-tags.tsx
 import React20, {
   createContext as createContext21,
   createRef as createRef2,
   useCallback as useCallback9,
-  useContext as useContext20,
+  useContext as useContext21,
   useEffect as useEffect7,
-  useMemo as useMemo21,
+  useMemo as useMemo22,
   useRef as useRef12,
   useState as useState10
 } from "react";
@@ -6474,7 +6531,7 @@ var makeSharedElementSourceNode = ({
 };
 
 // src/audio/use-audio-context.ts
-import { useMemo as useMemo20, useRef as useRef11 } from "react";
+import { useMemo as useMemo21, useRef as useRef11 } from "react";
 var warned = false;
 var warnOnce = (logLevel) => {
   if (warned) {
@@ -6496,7 +6553,7 @@ var useSingletonAudioContext = ({
   if (sampleRate !== initialSampleRate.current) {
     throw new Error(`Changing the AudioContext sample rate dynamically is not supported. The sample rate was initialized with ${initialSampleRate.current} Hz, but ${sampleRate} Hz was passed later.`);
   }
-  const context = useMemo20(() => {
+  const context = useMemo21(() => {
     if (env.isRendering) {
       return null;
     }
@@ -6635,9 +6692,9 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled, pr
   });
   const audioContextIsPlayingEventually = useRef12(false);
   const isResuming = useRef12(null);
-  const audioSyncAnchor = useMemo21(() => ({ value: 0 }), []);
+  const audioSyncAnchor = useMemo22(() => ({ value: 0 }), []);
   const audioSyncAnchorListeners = useRef12([]);
-  const audioSyncAnchorEmitter = useMemo21(() => {
+  const audioSyncAnchorEmitter = useMemo22(() => {
     return {
       dispatch: (event) => {
         audioSyncAnchorListeners.current.forEach((l) => l(event));
@@ -6657,7 +6714,7 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled, pr
   const unscheduleAudioNode = useCallback9((node) => {
     nodesToResume.current.delete(node);
   }, []);
-  const scheduleAudioNode = useMemo21(() => {
+  const scheduleAudioNode = useMemo22(() => {
     return ({
       node,
       mediaTimestamp,
@@ -6749,7 +6806,7 @@ var SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled, pr
     audioContextIsPlayingEventually.current = false;
     return ctxAndGain.suspend();
   }, [ctxAndGain]);
-  const audioContextValue = useMemo21(() => {
+  const audioContextValue = useMemo22(() => {
     return {
       audioContext: ctxAndGain?.audioContext ?? null,
       getAudioContextState: () => ctxAndGain?.getState() ?? null,
@@ -6786,10 +6843,10 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const env = useRemotionEnvironment();
-  const audioCtx = useContext20(SharedAudioContext);
+  const audioCtx = useContext21(SharedAudioContext);
   const audioContext = audioCtx?.audioContext ?? null;
   const resume = audioCtx?.resume;
-  const refs = useMemo21(() => {
+  const refs = useMemo22(() => {
     return new Array(numberOfAudioTags).fill(true).map(() => {
       const ref = createRef2();
       return {
@@ -6928,7 +6985,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     });
     resume?.();
   }, [logLevel, mountTime, refs, env.isPlayer, resume]);
-  const audioTagsValue = useMemo21(() => {
+  const audioTagsValue = useMemo22(() => {
     return {
       registerAudio,
       unregisterAudio,
@@ -6943,7 +7000,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     unregisterAudio,
     updateAudio
   ]);
-  const sharedAudioTagElements = useMemo21(() => {
+  const sharedAudioTagElements = useMemo22(() => {
     return refs.map(({ id, ref }) => {
       return /* @__PURE__ */ jsx19("audio", {
         ref,
@@ -6966,8 +7023,8 @@ var useSharedAudio = ({
   premounting,
   postmounting
 }) => {
-  const audioCtx = useContext20(SharedAudioContext);
-  const tagsCtx = useContext20(SharedAudioTagsContext);
+  const audioCtx = useContext21(SharedAudioContext);
+  const tagsCtx = useContext21(SharedAudioTagsContext);
   const [elem] = useState10(() => {
     if (tagsCtx && tagsCtx.numberOfAudioTags > 0) {
       return tagsCtx.registerAudio({ aud, audioId, premounting, postmounting });
@@ -7153,7 +7210,7 @@ var useVolume = ({
   const audioStuffRef = useRef14(null);
   const currentVolumeRef = useRef14(volume);
   currentVolumeRef.current = volume;
-  const sharedAudioContext = useContext21(SharedAudioContext);
+  const sharedAudioContext = useContext22(SharedAudioContext);
   if (!sharedAudioContext) {
     throw new Error("useAmplification must be used within a SharedAudioContext");
   }
@@ -7219,12 +7276,12 @@ var useVolume = ({
 };
 
 // src/use-media-in-timeline.ts
-import { useContext as useContext23, useEffect as useEffect8, useMemo as useMemo22, useState as useState11 } from "react";
+import { useContext as useContext24, useEffect as useEffect8, useMemo as useMemo23, useState as useState11 } from "react";
 
 // src/audio/use-audio-frame.ts
-import { useContext as useContext22 } from "react";
+import { useContext as useContext23 } from "react";
 var useMediaStartsAt = () => {
-  const parentSequence = useContext22(SequenceContext);
+  const parentSequence = useContext23(SequenceContext);
   return parentSequence?.cumulatedNegativeFrom ?? 0;
 };
 var useFrameForVolumeProp = (behavior) => {
@@ -7321,7 +7378,7 @@ var useBasicMediaInTimeline = ({
   if (!src) {
     throw new Error("No src passed");
   }
-  const parentSequence = useContext23(SequenceContext);
+  const parentSequence = useContext24(SequenceContext);
   const [initialVolume] = useState11(() => volume);
   const duration = getTimelineDuration({
     compositionDurationInFrames: sequenceDurationInFrames,
@@ -7331,7 +7388,7 @@ var useBasicMediaInTimeline = ({
     parentSequenceDurationInFrames: parentSequence?.durationInFrames ?? null,
     loop
   });
-  const volumes = useMemo22(() => {
+  const volumes = useMemo23(() => {
     if (typeof volume === "number") {
       return volume;
     }
@@ -7352,7 +7409,7 @@ var useBasicMediaInTimeline = ({
   const nonce = useNonce();
   const { rootId } = useTimelineContext();
   const startMediaFrom = 0 - mediaStartsAt + (trimBefore ?? 0);
-  const memoizedResult = useMemo22(() => {
+  const memoizedResult = useMemo23(() => {
     return {
       volumes,
       duration,
@@ -7393,9 +7450,9 @@ var useMediaInTimeline = ({
   documentationLink,
   refForOutline
 }) => {
-  const parentSequence = useContext23(SequenceContext);
+  const parentSequence = useContext24(SequenceContext);
   const startsAt = useMediaStartsAt();
-  const { registerSequence, unregisterSequence } = useContext23(SequenceManager);
+  const { registerSequence, unregisterSequence } = useContext24(SequenceManager);
   const { durationInFrames } = useVideoConfig();
   const mediaStartsAt = useMediaStartsAt();
   const { volumes, duration, doesVolumeChange, nonce, rootId, finalDisplayName } = useBasicMediaInTimeline({
@@ -7483,25 +7540,25 @@ var useMediaInTimeline = ({
 // src/use-media-playback.ts
 import {
   useCallback as useCallback12,
-  useContext as useContext26,
+  useContext as useContext27,
   useEffect as useEffect12,
   useLayoutEffect as useLayoutEffect7,
   useRef as useRef18
 } from "react";
 
 // src/buffer-until-first-frame.ts
-import { useCallback as useCallback11, useMemo as useMemo25, useRef as useRef16 } from "react";
+import { useCallback as useCallback11, useMemo as useMemo26, useRef as useRef16 } from "react";
 
 // src/use-buffer-state.ts
-import { useContext as useContext25, useMemo as useMemo24 } from "react";
+import { useContext as useContext26, useMemo as useMemo25 } from "react";
 
 // src/buffering.tsx
 import React21, {
   useCallback as useCallback10,
-  useContext as useContext24,
+  useContext as useContext25,
   useEffect as useEffect9,
   useLayoutEffect as useLayoutEffect6,
-  useMemo as useMemo23,
+  useMemo as useMemo24,
   useRef as useRef15,
   useState as useState12
 } from "react";
@@ -7587,13 +7644,13 @@ var useBufferManager = (logLevel, mountTime) => {
       }
     }, [blocks]);
   }
-  return useMemo23(() => {
+  return useMemo24(() => {
     return { addBlock, listenForBuffering, listenForResume, buffering };
   }, [addBlock, buffering, listenForBuffering, listenForResume]);
 };
 var BufferingContextReact = React21.createContext(null);
 var BufferingProvider = ({ children }) => {
-  const { logLevel, mountTime } = useContext24(LogLevelContext);
+  const { logLevel, mountTime } = useContext25(LogLevelContext);
   const bufferManager = useBufferManager(logLevel ?? "info", mountTime);
   return /* @__PURE__ */ jsx20(BufferingContextReact.Provider, {
     value: bufferManager,
@@ -7621,10 +7678,10 @@ var useIsPlayerBuffering = (bufferManager) => {
 
 // src/use-buffer-state.ts
 var useBufferState = () => {
-  const buffer = useContext25(BufferingContextReact);
+  const buffer = useContext26(BufferingContextReact);
   const logLevel = useLogLevel();
   const addBlock = buffer ? buffer.addBlock : null;
-  return useMemo24(() => ({
+  return useMemo25(() => ({
     delayPlayback: () => {
       if (!addBlock) {
         throw new Error("Tried to enable the buffering state, but a Remotion context was not found. This API can only be called in a component that was passed to the Remotion Player or a <Composition>. Or you might have experienced a version mismatch - run `npx remotion versions` and ensure all packages have the same version. This error is thrown by the buffer state https://remotion.dev/docs/player/buffer-state");
@@ -7734,7 +7791,7 @@ var useBufferUntilFirstFrame = ({
     onVariableFpsVideoDetected,
     pauseWhenBuffering
   ]);
-  return useMemo25(() => {
+  return useMemo26(() => {
     return {
       isBuffering: () => bufferingRef.current,
       bufferUntilFirstFrame
@@ -8127,7 +8184,7 @@ var useMediaPlayback = ({
   const frame = useCurrentFrame();
   const absoluteFrame = useTimelinePosition();
   const [playing] = usePlayingState();
-  const buffering = useContext26(BufferingContextReact);
+  const buffering = useContext27(BufferingContextReact);
   const { fps } = useVideoConfig();
   const mediaStartsAt = useMediaStartsAt();
   const lastSeekDueToShift = useRef18(null);
@@ -8414,7 +8471,7 @@ var useMediaTag = ({
 };
 
 // src/volume-position-state.ts
-import { createContext as createContext22, useContext as useContext27, useMemo as useMemo26 } from "react";
+import { createContext as createContext22, useContext as useContext28, useMemo as useMemo27 } from "react";
 var MediaVolumeContext = createContext22({
   playerMuted: false,
   mediaVolume: 1
@@ -8428,16 +8485,16 @@ var SetMediaVolumeContext = createContext22({
   }
 });
 var useMediaVolumeState = () => {
-  const { mediaVolume } = useContext27(MediaVolumeContext);
-  const { setMediaVolume } = useContext27(SetMediaVolumeContext);
-  return useMemo26(() => {
+  const { mediaVolume } = useContext28(MediaVolumeContext);
+  const { setMediaVolume } = useContext28(SetMediaVolumeContext);
+  return useMemo27(() => {
     return [mediaVolume, setMediaVolume];
   }, [mediaVolume, setMediaVolume]);
 };
 var usePlayerMutedState = () => {
-  const { playerMuted } = useContext27(MediaVolumeContext);
-  const { setPlayerMuted } = useContext27(SetMediaVolumeContext);
-  return useMemo26(() => {
+  const { playerMuted } = useContext28(MediaVolumeContext);
+  const { setPlayerMuted } = useContext28(SetMediaVolumeContext);
+  return useMemo27(() => {
     return [playerMuted, setPlayerMuted];
   }, [playerMuted, setPlayerMuted]);
 };
@@ -8496,7 +8553,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     throw new TypeError("No 'src' was passed to <Html5Audio>.");
   }
   const preloadedSrc = usePreload(src);
-  const sequenceContext = useContext28(SequenceContext);
+  const sequenceContext = useContext29(SequenceContext);
   const [timelineId] = useState14(() => String(Math.random()));
   const userPreferredVolume = evaluateVolume({
     frame: volumePropFrame,
@@ -8509,7 +8566,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     requestsVideoFrame: false,
     isClientSideRendering: false
   });
-  const propsToPass = useMemo27(() => {
+  const propsToPass = useMemo28(() => {
     return {
       muted: muted || playerMuted || userPreferredVolume <= 0,
       src: preloadedSrc,
@@ -8526,7 +8583,7 @@ var AudioForDevelopmentForwardRefFunction = (props, ref) => {
     userPreferredVolume,
     crossOriginValue
   ]);
-  const id = useMemo27(() => `audio-${random(src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}-muted:${props.muted}-loop:${props.loop}`, [
+  const id = useMemo28(() => `audio-${random(src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}-muted:${props.muted}-loop:${props.loop}`, [
     src,
     sequenceContext?.relativeFrom,
     sequenceContext?.cumulatedFrom,
@@ -8636,11 +8693,11 @@ var AudioForPreview = forwardRef5(AudioForDevelopmentForwardRefFunction);
 // src/audio/AudioForRendering.tsx
 import {
   forwardRef as forwardRef6,
-  useContext as useContext29,
+  useContext as useContext30,
   useEffect as useEffect15,
   useImperativeHandle as useImperativeHandle5,
   useLayoutEffect as useLayoutEffect8,
-  useMemo as useMemo28,
+  useMemo as useMemo29,
   useRef as useRef20
 } from "react";
 import { jsx as jsx22 } from "react/jsx-runtime";
@@ -8668,10 +8725,10 @@ var AudioForRenderingRefForwardingFunction = (props, ref) => {
   const absoluteFrame = useTimelinePosition();
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const frame = useCurrentFrame();
-  const sequenceContext = useContext29(SequenceContext);
-  const { registerRenderAsset, unregisterRenderAsset } = useContext29(RenderAssetManager);
+  const sequenceContext = useContext30(SequenceContext);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext30(RenderAssetManager);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const id = useMemo28(() => `audio-${random(props.src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo29(() => `audio-${random(props.src ?? "")}-${sequenceContext?.relativeFrom}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.durationInFrames}`, [
     props.src,
     sequenceContext?.relativeFrom,
     sequenceContext?.cumulatedFrom,
@@ -8781,7 +8838,7 @@ var AudioForRendering = forwardRef6(AudioForRenderingRefForwardingFunction);
 // src/audio/html5-audio.tsx
 import { jsx as jsx23 } from "react/jsx-runtime";
 var AudioRefForwardingFunction = (props, ref) => {
-  const audioTagsContext = useContext30(SharedAudioTagsContext);
+  const audioTagsContext = useContext31(SharedAudioTagsContext);
   const propsWithFreeze = props;
   const {
     startFrom,
@@ -8805,7 +8862,7 @@ var AudioRefForwardingFunction = (props, ref) => {
   if (typeof freeze !== "undefined") {
     throw new TypeError('The "freeze" prop is not supported on <Html5Audio />. Use <Sequence freeze={...}> to freeze media playback.');
   }
-  const { durations, setDurations } = useContext30(DurationsContext);
+  const { durations, setDurations } = useContext31(DurationsContext);
   if (typeof props.src !== "string") {
     throw new TypeError(`The \`<Html5Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
   }
@@ -8910,7 +8967,7 @@ import {
   useCallback as useCallback15,
   useEffect as useEffect16,
   useImperativeHandle as useImperativeHandle6,
-  useMemo as useMemo29,
+  useMemo as useMemo30,
   useRef as useRef21,
   useState as useState15
 } from "react";
@@ -8978,7 +9035,7 @@ var SolidInner = ({
     effects,
     overrideId: overrideId ?? null
   });
-  const sourceCanvas = useMemo29(() => {
+  const sourceCanvas = useMemo30(() => {
     if (typeof document === "undefined") {
       return null;
     }
@@ -9046,7 +9103,7 @@ var SolidInner = ({
     cancelRender2,
     memoizedEffects
   ]);
-  const canvasStyle = useMemo29(() => {
+  const canvasStyle = useMemo30(() => {
     return {
       width,
       height,
@@ -9125,9 +9182,9 @@ import {
   createContext as createContext23,
   forwardRef as forwardRef9,
   useCallback as useCallback16,
-  useContext as useContext31,
+  useContext as useContext32,
   useLayoutEffect as useLayoutEffect9,
-  useMemo as useMemo30,
+  useMemo as useMemo31,
   useRef as useRef22
 } from "react";
 import { jsx as jsx25 } from "react/jsx-runtime";
@@ -9206,12 +9263,12 @@ var HtmlInCanvasContent = forwardRef9(({
   controls,
   style
 }, ref) => {
-  const ancestor = useContext31(HtmlInCanvasAncestorContext);
+  const ancestor = useContext32(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();
+  const { delayRender: delayRender2, continueRender: continueRender2, cancelRender: cancelRender2 } = useDelayRender();
   const { isClientSideRendering, isRendering } = useRemotionEnvironment();
   const canRetryMissingPaintRecord = !isRendering || isClientSideRendering;
   const usesDirectLayoutCanvas = onPaint === undefined && onInit === undefined;
@@ -9265,7 +9322,7 @@ var HtmlInCanvasContent = forwardRef9(({
       if (!placeholderCanvas) {
         throw new Error("Canvas not found");
       }
-      const handle = delayRender("onPaint");
+      const handle = delayRender2("onPaint");
       if (!initializedRef.current) {
         const currentOnInit = onInitRef.current;
         if (!currentOnInit) {
@@ -9366,6 +9423,7 @@ var HtmlInCanvasContent = forwardRef9(({
     chainState,
     continueRender2,
     cancelRender2,
+    delayRender2,
     resolvedPixelDensity,
     canRetryMissingPaintRecord
   ]);
@@ -9417,28 +9475,28 @@ var HtmlInCanvasContent = forwardRef9(({
     if (!canvas) {
       return;
     }
-    const handle = delayRender("waiting for first paint after canvas resize");
+    const handle = delayRender2("waiting for first paint after canvas resize");
     canvas.addEventListener("paint", () => {
       continueRender2(handle);
     }, { once: true });
     return () => {
       continueRender2(handle);
     };
-  }, [width, height, continueRender2, canvasSizeKey]);
-  const innerStyle = useMemo30(() => {
+  }, [width, height, continueRender2, delayRender2, canvasSizeKey]);
+  const innerStyle = useMemo31(() => {
     return {
       width,
       height
     };
   }, [width, height]);
-  const canvasStyle = useMemo30(() => {
+  const canvasStyle = useMemo31(() => {
     return {
       width,
       height,
       ...style ?? {}
     };
   }, [height, style, width]);
-  const ancestorValue = useMemo30(() => {
+  const ancestorValue = useMemo31(() => {
     return {
       requestParentPaint: () => {
         canvas2dRef.current?.requestPaint?.();
@@ -9538,10 +9596,10 @@ addSequenceStackTraces(HtmlInCanvas);
 import {
   forwardRef as forwardRef10,
   useCallback as useCallback17,
-  useContext as useContext32,
+  useContext as useContext33,
   useImperativeHandle as useImperativeHandle7,
   useLayoutEffect as useLayoutEffect10,
-  useMemo as useMemo31,
+  useMemo as useMemo32,
   useRef as useRef23,
   useState as useState16
 } from "react";
@@ -9668,7 +9726,7 @@ var CanvasImageContent = forwardRef10(({
     effects,
     overrideId: controls?.overrideId ?? null
   });
-  const sequenceContext = useContext32(SequenceContext);
+  const sequenceContext = useContext33(SequenceContext);
   const pendingLoadDelayRef = useRef23(null);
   const [isLoadPending, setIsLoadPending] = useState16(false);
   const isPremounting = Boolean(sequenceContext?.premounting);
@@ -9685,7 +9743,7 @@ var CanvasImageContent = forwardRef10(({
     continueRender2(pending.handle);
     pendingLoadDelayRef.current = null;
   }, [continueRender2]);
-  const sourceCanvas = useMemo31(() => {
+  const sourceCanvas = useMemo32(() => {
     if (typeof document === "undefined") {
       return null;
     }
@@ -10024,7 +10082,7 @@ var IFrame = forwardRef11(IFrameRefForwarding);
 // src/Img.tsx
 import {
   useCallback as useCallback19,
-  useContext as useContext33,
+  useContext as useContext34,
   useLayoutEffect as useLayoutEffect11,
   useRef as useRef24,
   useState as useState18
@@ -10050,7 +10108,7 @@ var ImgContent = ({
   const imageRef = useRef24(null);
   const errors = useRef24({});
   const { delayPlayback } = useBufferState();
-  const sequenceContext = useContext33(SequenceContext);
+  const sequenceContext = useContext34(SequenceContext);
   const [isLoading, setIsLoading] = useState18(false);
   const _propsValid = true;
   if (!_propsValid) {
@@ -10402,7 +10460,10 @@ var makeRemotionComponentIdentity = ({
 };
 var interactiveElementSchema = {
   ...baseSchema,
-  ...transformSchema,
+  ...transformSchema
+};
+var interactiveTextElementSchema = {
+  ...interactiveElementSchema,
   ...textSchema,
   ...textContentSchema
 };
@@ -10418,7 +10479,7 @@ var withSchema = (options) => {
   addSequenceStackTraces(Wrapped);
   return Wrapped;
 };
-var makeInteractiveElement = (tag, displayName) => {
+var makeInteractiveElement = (tag, displayName, schema) => {
   const Inner = forwardRef12((propsWithControls, ref) => {
     const {
       durationInFrames,
@@ -10464,12 +10525,18 @@ var makeInteractiveElement = (tag, displayName) => {
       packageName: "remotion",
       componentName: displayName.slice(1, -1)
     }),
-    schema: interactiveElementSchema,
+    schema,
     supportsEffects: false
   });
   Wrapped.displayName = displayName;
   return Wrapped;
 };
+var makeInteractiveTextElement = (tag, displayName) => {
+  return makeInteractiveElement(tag, displayName, interactiveTextElementSchema);
+};
+var makeInteractiveNonTextElement = (tag, displayName) => {
+  return makeInteractiveElement(tag, displayName, interactiveElementSchema);
+};
 var Interactive = {
   baseSchema,
   transformSchema,
@@ -10478,41 +10545,41 @@ var Interactive = {
   sequenceSchema,
   withSchema,
   _internalMakeRemotionComponentIdentity: makeRemotionComponentIdentity,
-  A: makeInteractiveElement("a", "<Interactive.A>"),
-  Article: makeInteractiveElement("article", "<Interactive.Article>"),
-  Aside: makeInteractiveElement("aside", "<Interactive.Aside>"),
-  Button: makeInteractiveElement("button", "<Interactive.Button>"),
-  Circle: makeInteractiveElement("circle", "<Interactive.Circle>"),
-  Code: makeInteractiveElement("code", "<Interactive.Code>"),
-  Div: makeInteractiveElement("div", "<Interactive.Div>"),
-  Ellipse: makeInteractiveElement("ellipse", "<Interactive.Ellipse>"),
-  Em: makeInteractiveElement("em", "<Interactive.Em>"),
-  Footer: makeInteractiveElement("footer", "<Interactive.Footer>"),
-  G: makeInteractiveElement("g", "<Interactive.G>"),
-  H1: makeInteractiveElement("h1", "<Interactive.H1>"),
-  H2: makeInteractiveElement("h2", "<Interactive.H2>"),
-  H3: makeInteractiveElement("h3", "<Interactive.H3>"),
-  H4: makeInteractiveElement("h4", "<Interactive.H4>"),
-  H5: makeInteractiveElement("h5", "<Interactive.H5>"),
-  H6: makeInteractiveElement("h6", "<Interactive.H6>"),
-  Header: makeInteractiveElement("header", "<Interactive.Header>"),
-  Label: makeInteractiveElement("label", "<Interactive.Label>"),
-  Li: makeInteractiveElement("li", "<Interactive.Li>"),
-  Line: makeInteractiveElement("line", "<Interactive.Line>"),
-  Main: makeInteractiveElement("main", "<Interactive.Main>"),
-  Nav: makeInteractiveElement("nav", "<Interactive.Nav>"),
-  Ol: makeInteractiveElement("ol", "<Interactive.Ol>"),
-  P: makeInteractiveElement("p", "<Interactive.P>"),
-  Path: makeInteractiveElement("path", "<Interactive.Path>"),
-  Pre: makeInteractiveElement("pre", "<Interactive.Pre>"),
-  Rect: makeInteractiveElement("rect", "<Interactive.Rect>"),
-  Section: makeInteractiveElement("section", "<Interactive.Section>"),
-  Small: makeInteractiveElement("small", "<Interactive.Small>"),
-  Span: makeInteractiveElement("span", "<Interactive.Span>"),
-  Strong: makeInteractiveElement("strong", "<Interactive.Strong>"),
-  Svg: makeInteractiveElement("svg", "<Interactive.Svg>"),
-  Text: makeInteractiveElement("text", "<Interactive.Text>"),
-  Ul: makeInteractiveElement("ul", "<Interactive.Ul>")
+  A: makeInteractiveTextElement("a", "<Interactive.A>"),
+  Article: makeInteractiveTextElement("article", "<Interactive.Article>"),
+  Aside: makeInteractiveTextElement("aside", "<Interactive.Aside>"),
+  Button: makeInteractiveTextElement("button", "<Interactive.Button>"),
+  Circle: makeInteractiveNonTextElement("circle", "<Interactive.Circle>"),
+  Code: makeInteractiveTextElement("code", "<Interactive.Code>"),
+  Div: makeInteractiveTextElement("div", "<Interactive.Div>"),
+  Ellipse: makeInteractiveNonTextElement("ellipse", "<Interactive.Ellipse>"),
+  Em: makeInteractiveTextElement("em", "<Interactive.Em>"),
+  Footer: makeInteractiveTextElement("footer", "<Interactive.Footer>"),
+  G: makeInteractiveNonTextElement("g", "<Interactive.G>"),
+  H1: makeInteractiveTextElement("h1", "<Interactive.H1>"),
+  H2: makeInteractiveTextElement("h2", "<Interactive.H2>"),
+  H3: makeInteractiveTextElement("h3", "<Interactive.H3>"),
+  H4: makeInteractiveTextElement("h4", "<Interactive.H4>"),
+  H5: makeInteractiveTextElement("h5", "<Interactive.H5>"),
+  H6: makeInteractiveTextElement("h6", "<Interactive.H6>"),
+  Header: makeInteractiveTextElement("header", "<Interactive.Header>"),
+  Label: makeInteractiveTextElement("label", "<Interactive.Label>"),
+  Li: makeInteractiveTextElement("li", "<Interactive.Li>"),
+  Line: makeInteractiveNonTextElement("line", "<Interactive.Line>"),
+  Main: makeInteractiveTextElement("main", "<Interactive.Main>"),
+  Nav: makeInteractiveTextElement("nav", "<Interactive.Nav>"),
+  Ol: makeInteractiveTextElement("ol", "<Interactive.Ol>"),
+  P: makeInteractiveTextElement("p", "<Interactive.P>"),
+  Path: makeInteractiveNonTextElement("path", "<Interactive.Path>"),
+  Pre: makeInteractiveTextElement("pre", "<Interactive.Pre>"),
+  Rect: makeInteractiveNonTextElement("rect", "<Interactive.Rect>"),
+  Section: makeInteractiveTextElement("section", "<Interactive.Section>"),
+  Small: makeInteractiveTextElement("small", "<Interactive.Small>"),
+  Span: makeInteractiveTextElement("span", "<Interactive.Span>"),
+  Strong: makeInteractiveTextElement("strong", "<Interactive.Strong>"),
+  Svg: makeInteractiveNonTextElement("svg", "<Interactive.Svg>"),
+  Text: makeInteractiveTextElement("text", "<Interactive.Text>"),
+  Ul: makeInteractiveTextElement("ul", "<Interactive.Ul>")
 };
 // src/internals.ts
 import { createRef as createRef3 } from "react";
@@ -10525,7 +10592,7 @@ var compositionsRef = React31.createRef();
 import {
   useCallback as useCallback21,
   useImperativeHandle as useImperativeHandle8,
-  useMemo as useMemo32,
+  useMemo as useMemo33,
   useRef as useRef26,
   useState as useState19
 } from "react";
@@ -10584,7 +10651,7 @@ var CompositionManagerProvider = ({
       getCompositions: () => currentcompositionsRef.current
     };
   }, []);
-  const compositionManagerSetters = useMemo32(() => {
+  const compositionManagerSetters = useMemo33(() => {
     return {
       registerComposition,
       unregisterComposition,
@@ -10600,7 +10667,7 @@ var CompositionManagerProvider = ({
     unregisterFolder,
     onlyRenderComposition
   ]);
-  const compositionManagerContextValue = useMemo32(() => {
+  const compositionManagerContextValue = useMemo33(() => {
     return {
       compositions,
       folders,
@@ -10719,14 +10786,14 @@ var waitForRoot = (fn) => {
 };
 
 // src/RemotionRoot.tsx
-import { useMemo as useMemo34 } from "react";
+import { useMemo as useMemo35 } from "react";
 
 // src/use-media-enabled.tsx
-import { createContext as createContext24, useContext as useContext34, useMemo as useMemo33 } from "react";
+import { createContext as createContext24, useContext as useContext35, useMemo as useMemo34 } from "react";
 import { jsx as jsx31 } from "react/jsx-runtime";
 var MediaEnabledContext = createContext24(null);
 var useVideoEnabled = () => {
-  const context = useContext34(MediaEnabledContext);
+  const context = useContext35(MediaEnabledContext);
   if (!context) {
     return window.remotion_videoEnabled;
   }
@@ -10736,7 +10803,7 @@ var useVideoEnabled = () => {
   return context.videoEnabled;
 };
 var useAudioEnabled = () => {
-  const context = useContext34(MediaEnabledContext);
+  const context = useContext35(MediaEnabledContext);
   if (!context) {
     return window.remotion_audioEnabled;
   }
@@ -10750,7 +10817,7 @@ var MediaEnabledProvider = ({
   videoEnabled,
   audioEnabled
 }) => {
-  const value = useMemo33(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
+  const value = useMemo34(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
   return /* @__PURE__ */ jsx31(MediaEnabledContext.Provider, {
     value,
     children
@@ -10769,13 +10836,13 @@ var RemotionRootContexts = ({
   audioEnabled,
   frameState
 }) => {
-  const nonceContext = useMemo34(() => {
+  const nonceContext = useMemo35(() => {
     let counter = 0;
     return {
       getNonce: () => counter++
     };
   }, []);
-  const logging = useMemo34(() => {
+  const logging = useMemo35(() => {
     return { logLevel, mountTime: Date.now() };
   }, [logLevel]);
   return /* @__PURE__ */ jsx32(LogLevelContext.Provider, {
@@ -11081,7 +11148,7 @@ var useCurrentScale = (options) => {
     return hasContext.scale;
   }
   return calculateScale({
-    canvasSize: hasContext.canvasSize,
+    canvasSize: hasContext.canvasSizeForAuto,
     compositionHeight: config.height,
     compositionWidth: config.width,
     previewSize: zoomContext.size.size
@@ -11089,7 +11156,7 @@ var useCurrentScale = (options) => {
 };
 
 // src/use-pixel-density.ts
-import React36, { useContext as useContext35 } from "react";
+import React36, { useContext as useContext36 } from "react";
 var PixelDensityContext = React36.createContext(null);
 var getBrowserPixelDensity = () => {
   if (typeof window === "undefined") {
@@ -11098,8 +11165,8 @@ var getBrowserPixelDensity = () => {
   return window.devicePixelRatio || 1;
 };
 var usePixelDensity = (options) => {
-  const pixelDensity = useContext35(PixelDensityContext);
-  const canUseRemotionHooks = useContext35(CanUseRemotionHooks);
+  const pixelDensity = useContext36(PixelDensityContext);
+  const canUseRemotionHooks = useContext36(CanUseRemotionHooks);
   if (pixelDensity !== null) {
     return pixelDensity;
   }
@@ -11121,10 +11188,10 @@ import { useCallback as useCallback24 } from "react";
 // src/video/OffthreadVideoForRendering.tsx
 import {
   useCallback as useCallback22,
-  useContext as useContext36,
+  useContext as useContext37,
   useEffect as useEffect17,
   useLayoutEffect as useLayoutEffect12,
-  useMemo as useMemo35,
+  useMemo as useMemo36,
   useState as useState20
 } from "react";
 
@@ -11164,13 +11231,13 @@ var OffthreadVideoForRendering = ({
   const frame = useCurrentFrame();
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior);
   const videoConfig = useUnsafeVideoConfig();
-  const sequenceContext = useContext36(SequenceContext);
+  const sequenceContext = useContext37(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext36(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext37(RenderAssetManager);
   if (!src) {
     throw new TypeError("No `src` was passed to <OffthreadVideo>.");
   }
-  const id = useMemo35(() => `offthreadvideo-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo36(() => `offthreadvideo-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -11225,14 +11292,14 @@ var OffthreadVideoForRendering = ({
     sequenceContext?.cumulatedNegativeFrom,
     audioStreamIndex
   ]);
-  const currentTime = useMemo35(() => {
+  const currentTime = useMemo36(() => {
     return getExpectedMediaFrameUncorrected({
       frame,
       playbackRate: playbackRate || 1,
       startFrom: -mediaStartsAt
     }) / videoConfig.fps;
   }, [frame, mediaStartsAt, playbackRate, videoConfig.fps]);
-  const actualSrc = useMemo35(() => {
+  const actualSrc = useMemo36(() => {
     return getOffthreadVideoSource({
       src,
       currentTime,
@@ -11320,7 +11387,7 @@ var OffthreadVideoForRendering = ({
       cancelRender("Failed to load image with src " + imageSrc);
     }
   }, [imageSrc, onError]);
-  const className = useMemo35(() => {
+  const className = useMemo36(() => {
     return [OBJECTFIT_CONTAIN_CLASS_NAME, props2.className].filter(truthy).join(" ");
   }, [props2.className]);
   const onImageFrame = useCallback22((img) => {
@@ -11347,10 +11414,10 @@ var OffthreadVideoForRendering = ({
 import React38, {
   forwardRef as forwardRef13,
   useCallback as useCallback23,
-  useContext as useContext37,
+  useContext as useContext38,
   useEffect as useEffect19,
   useImperativeHandle as useImperativeHandle9,
-  useMemo as useMemo36,
+  useMemo as useMemo37,
   useRef as useRef27,
   useState as useState21
 } from "react";
@@ -11403,12 +11470,12 @@ class MediaPlaybackError extends Error {
 // src/video/VideoForPreview.tsx
 import { jsx as jsx34 } from "react/jsx-runtime";
 var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
-  const context = useContext37(SharedAudioContext);
+  const context = useContext38(SharedAudioContext);
   if (!context) {
     throw new Error("SharedAudioContext not found");
   }
   const videoRef = useRef27(null);
-  const sharedSource = useMemo36(() => {
+  const sharedSource = useMemo37(() => {
     if (!context.audioContext) {
       return null;
     }
@@ -11460,7 +11527,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   }
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const { fps, durationInFrames } = useVideoConfig();
-  const parentSequence = useContext37(SequenceContext);
+  const parentSequence = useContext38(SequenceContext);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const [timelineId] = useState21(() => String(Math.random()));
@@ -11611,7 +11678,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.preload = "auto";
     }
   }, []);
-  const actualStyle = useMemo36(() => {
+  const actualStyle = useMemo37(() => {
     return {
       ...style
     };
@@ -11833,7 +11900,7 @@ var watchStaticFile = (fileName, callback) => {
 };
 
 // src/wrap-remotion-context.tsx
-import React40, { useMemo as useMemo37 } from "react";
+import React40, { useMemo as useMemo38 } from "react";
 import { jsx as jsx36 } from "react/jsx-runtime";
 function useRemotionContexts() {
   const compositionManagerCtx = React40.useContext(CompositionManager);
@@ -11850,7 +11917,7 @@ function useRemotionContexts() {
   const visualModePropStatusesRefContext = React40.useContext(VisualModePropStatusesRefContext);
   const bufferManagerContext = React40.useContext(BufferingContextReact);
   const logLevelContext = React40.useContext(LogLevelContext);
-  return useMemo37(() => ({
+  return useMemo38(() => ({
     compositionManagerCtx,
     timelineContext,
     setTimelineContext,
@@ -11963,6 +12030,7 @@ var Internals = {
   textSchema,
   transformSchema,
   premountSchema,
+  premountStyleSchema,
   flattenActiveSchema,
   getFlatSchemaWithAllKeys,
   RemotionRootContexts,
@@ -11976,6 +12044,7 @@ var Internals = {
   truthy,
   SequenceContext,
   PremountContext,
+  usePremounting,
   useRemotionContexts,
   RemotionContextProvider,
   CSSUtils: exports_default_css,
@@ -12087,7 +12156,7 @@ var Internals = {
 // src/series/index.tsx
 import React42, {
   forwardRef as forwardRef14,
-  useMemo as useMemo38
+  useMemo as useMemo39
 } from "react";
 
 // src/series/flatten-children.tsx
@@ -12162,7 +12231,7 @@ var validateSeriesSequenceProps = ({
   return offset;
 };
 var SeriesInner = (props2) => {
-  const childrenValue = useMemo38(() => {
+  const childrenValue = useMemo39(() => {
     const flattenedChildren = flattenChildren(props2.children);
     const renderChildren = (i, startFrame) => {
       if (i === flattenedChildren.length) {
@@ -12351,16 +12420,16 @@ var Still = (props2) => {
 };
 addSequenceStackTraces(Still);
 // src/video/html5-video.tsx
-import { forwardRef as forwardRef16, useCallback as useCallback25, useContext as useContext39 } from "react";
+import { forwardRef as forwardRef16, useCallback as useCallback25, useContext as useContext40 } from "react";
 
 // src/video/VideoForRendering.tsx
 import {
   forwardRef as forwardRef15,
-  useContext as useContext38,
+  useContext as useContext39,
   useEffect as useEffect20,
   useImperativeHandle as useImperativeHandle10,
   useLayoutEffect as useLayoutEffect13,
-  useMemo as useMemo39,
+  useMemo as useMemo40,
   useRef as useRef28
 } from "react";
 
@@ -12512,14 +12581,14 @@ var VideoForRenderingForwardFunction = ({
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const videoConfig = useUnsafeVideoConfig();
   const videoRef = useRef28(null);
-  const sequenceContext = useContext38(SequenceContext);
+  const sequenceContext = useContext39(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
   const environment = useRemotionEnvironment();
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext38(RenderAssetManager);
-  const id = useMemo39(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const { registerRenderAsset, unregisterRenderAsset } = useContext39(RenderAssetManager);
+  const id = useMemo40(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     props2.src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -12733,7 +12802,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 } = useContext39(DurationsContext);
+  const { durations, setDurations } = useContext40(DurationsContext);
   if (typeof ref === "string") {
     throw new Error("string refs are not supported");
   }