remotion 4.0.495 → 4.0.497

package/dist/esm/index.mjs

@@ -1310,7 +1310,7 @@ var getSingleChildComponent = (children) => {
 };
 
 // src/version.ts
-var VERSION = "4.0.495";
+var VERSION = "4.0.497";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -1847,6 +1847,45 @@ var textSchema = {
     hiddenFromList: false
   }
 };
+var borderSchema = {
+  "style.borderWidth": {
+    type: "number",
+    default: undefined,
+    min: 0,
+    step: 1,
+    description: "Border width",
+    hiddenFromList: false
+  },
+  "style.borderStyle": {
+    type: "enum",
+    default: "none",
+    description: "Border style",
+    variants: {
+      none: {},
+      hidden: {},
+      solid: {},
+      dashed: {},
+      dotted: {},
+      double: {},
+      groove: {},
+      ridge: {},
+      inset: {},
+      outset: {}
+    }
+  },
+  "style.borderColor": {
+    type: "color",
+    default: undefined,
+    description: "Border color"
+  }
+};
+var backgroundSchema = {
+  "style.backgroundColor": {
+    type: "color",
+    default: "transparent",
+    description: "Color"
+  }
+};
 var textContentSchema = {
   children: {
     type: "text-content",
@@ -1874,20 +1913,13 @@ var premountSchema = {
     keyframable: false
   }
 };
-var premountStyleSchema = {
-  styleWhilePremounted: {
-    type: "hidden"
-  },
-  styleWhilePostmounted: {
-    type: "hidden"
-  }
-};
 var sequencePremountSchema = {
-  ...premountSchema,
-  ...premountStyleSchema
+  ...premountSchema
 };
 var sequenceStyleSchema = {
   ...transformSchema,
+  ...backgroundSchema,
+  ...borderSchema,
   ...sequencePremountSchema
 };
 var hiddenField = {
@@ -5319,39 +5351,56 @@ var CanvasRefForwardingFunction = ({ width, height, fit, className, style, effec
 };
 var Canvas = React16.forwardRef(CanvasRefForwardingFunction);
 
-// src/animated-image/decode-image.ts
-var CACHE_SIZE = 5;
-var getActualTime = ({
-  loopBehavior,
-  durationFound,
-  timeInSec
-}) => {
-  return loopBehavior === "loop" ? durationFound ? timeInSec % durationFound : timeInSec : Math.min(timeInSec, durationFound || Infinity);
-};
-var decodeImage = async ({
+// src/animated-image/create-image-decoder.ts
+var createImageDecoder = async ({
   resolvedSrc,
   signal,
   requestInit,
-  currentTime,
-  initialLoopBehavior
+  contentType
 }) => {
   if (typeof ImageDecoder === "undefined") {
     throw new Error("Your browser does not support the WebCodecs ImageDecoder API.");
   }
-  const res = await fetch(resolvedSrc, { ...requestInit, signal });
-  const { body } = res;
+  const response = await fetch(resolvedSrc, { ...requestInit, signal });
+  const { body } = response;
   if (!body) {
     throw new Error("Got no body");
   }
   const decoder = new ImageDecoder({
     data: body,
-    type: res.headers.get("Content-Type") || "image/gif"
+    type: contentType ?? response.headers.get("Content-Type") ?? "image/gif"
   });
-  await decoder.completed;
+  await Promise.all([decoder.completed, decoder.tracks.ready]);
   const { selectedTrack } = decoder.tracks;
   if (!selectedTrack) {
+    decoder.close();
     throw new Error("No selected track");
   }
+  return { decoder, selectedTrack };
+};
+
+// src/animated-image/decode-image.ts
+var CACHE_SIZE = 5;
+var getActualTime = ({
+  loopBehavior,
+  durationFound,
+  timeInSec
+}) => {
+  return loopBehavior === "loop" ? durationFound ? timeInSec % durationFound : timeInSec : Math.min(timeInSec, durationFound || Infinity);
+};
+var decodeImage = async ({
+  resolvedSrc,
+  signal,
+  requestInit,
+  currentTime,
+  initialLoopBehavior
+}) => {
+  const { decoder, selectedTrack } = await createImageDecoder({
+    resolvedSrc,
+    signal,
+    requestInit,
+    contentType: null
+  });
   const cache2 = [];
   let durationFound = null;
   const getFrameByIndex = async (frameIndex) => {
@@ -5457,6 +5506,13 @@ var decodeImage = async ({
     return closest;
   };
   return {
+    close: () => {
+      for (const item of cache2) {
+        item.frame?.close();
+        item.frame = null;
+      }
+      decoder.close();
+    },
     getFrame,
     frameCount: selectedTrack.frameCount
   };
@@ -5503,6 +5559,7 @@ var animatedImageSchema = {
     keyframable: false
   },
   ...baseSchema,
+  ...premountSchema,
   playbackRate: {
     type: "number",
     min: 0,
@@ -5513,7 +5570,9 @@ var animatedImageSchema = {
     hiddenFromList: false,
     keyframable: false
   },
-  ...transformSchema
+  ...transformSchema,
+  ...backgroundSchema,
+  ...borderSchema
 };
 var getCanvasPropsFromSequenceProps = (props) => {
   const canvasProps = {};
@@ -5565,6 +5624,15 @@ var AnimatedImageContent = forwardRef4(({
   const [initialLoopBehavior] = useState6(() => loopBehavior);
   useEffect5(() => {
     const controller = new AbortController;
+    let cancelled = false;
+    let continued = false;
+    const continueRenderOnce = () => {
+      if (continued) {
+        return;
+      }
+      continued = true;
+      continueRender2(decodeHandle);
+    };
     decodeImage({
       resolvedSrc,
       signal: controller.signal,
@@ -5572,22 +5640,31 @@ var AnimatedImageContent = forwardRef4(({
       currentTime: currentTimeRef.current,
       initialLoopBehavior
     }).then((d) => {
+      if (cancelled) {
+        d.close();
+        return;
+      }
       setImageDecoder(d);
-      continueRender2(decodeHandle);
+      continueRenderOnce();
     }).catch((err) => {
+      if (cancelled) {
+        return;
+      }
       if (err.name === "AbortError") {
-        continueRender2(decodeHandle);
+        continueRenderOnce();
         return;
       }
       if (onError) {
         onError?.(err);
-        continueRender2(decodeHandle);
+        continueRenderOnce();
       } else {
         cancelRender(err);
       }
     });
     return () => {
+      cancelled = true;
       controller.abort();
+      continueRenderOnce();
     };
   }, [
     resolvedSrc,
@@ -5597,6 +5674,11 @@ var AnimatedImageContent = forwardRef4(({
     initialLoopBehavior,
     continueRender2
   ]);
+  useEffect5(() => {
+    return () => {
+      imageDecoder?.close();
+    };
+  }, [imageDecoder]);
   useLayoutEffect2(() => {
     if (!imageDecoder) {
       return;
@@ -5666,6 +5748,11 @@ var AnimatedImageInner = ({
   className,
   style,
   durationInFrames,
+  from,
+  premountFor,
+  postmountFor,
+  styleWhilePremounted,
+  styleWhilePostmounted,
   requestInit,
   effects = [],
   controls,
@@ -5677,6 +5764,24 @@ var AnimatedImageInner = ({
   useImperativeHandle2(ref, () => {
     return actualRef.current;
   }, []);
+  const {
+    effectivePostmountFor,
+    effectivePremountFor,
+    freezeFrame,
+    isPremountingOrPostmounting,
+    postmountingActive,
+    premountingActive,
+    premountingStyle
+  } = usePremounting({
+    from: from ?? 0,
+    durationInFrames: durationInFrames ?? Infinity,
+    premountFor: premountFor ?? null,
+    postmountFor: postmountFor ?? null,
+    style: style ?? null,
+    styleWhilePremounted: styleWhilePremounted ?? null,
+    styleWhilePostmounted: styleWhilePostmounted ?? null,
+    hideWhilePremounted: "display-none"
+  });
   const canvasProps = getCanvasPropsFromSequenceProps(sequenceProps);
   const animatedImageProps = {
     src,
@@ -5688,24 +5793,33 @@ var AnimatedImageInner = ({
     loopBehavior,
     id,
     className,
-    style,
+    style: premountingStyle ?? undefined,
     requestInit,
     ...canvasProps
   };
-  return /* @__PURE__ */ jsx14(Sequence, {
-    layout: "none",
-    durationInFrames,
-    name: "<AnimatedImage>",
-    _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/animatedimage",
-    controls,
-    _remotionInternalEffects: memoizedEffectDefinitions,
-    ...sequenceProps,
-    outlineRef: actualRef,
-    children: /* @__PURE__ */ jsx14(AnimatedImageContent, {
-      ...animatedImageProps,
-      ref: actualRef,
-      effects,
-      controls
+  return /* @__PURE__ */ jsx14(Freeze, {
+    frame: freezeFrame,
+    active: isPremountingOrPostmounting,
+    children: /* @__PURE__ */ jsx14(Sequence, {
+      layout: "none",
+      from: from ?? 0,
+      durationInFrames: durationInFrames ?? Infinity,
+      name: "<AnimatedImage>",
+      _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/animatedimage",
+      controls,
+      _remotionInternalEffects: memoizedEffectDefinitions,
+      _remotionInternalPremountDisplay: effectivePremountFor || null,
+      _remotionInternalPostmountDisplay: effectivePostmountFor || null,
+      _remotionInternalIsPremounting: premountingActive,
+      _remotionInternalIsPostmounting: postmountingActive,
+      ...sequenceProps,
+      outlineRef: actualRef,
+      children: /* @__PURE__ */ jsx14(AnimatedImageContent, {
+        ...animatedImageProps,
+        ref: actualRef,
+        effects,
+        controls
+      })
     })
   });
 };
@@ -6504,13 +6618,17 @@ var makeSharedElementSourceNode = ({
 }) => {
   let connected = null;
   let disposed = false;
+  let currentAudioContext = audioContext;
   return {
+    setAudioContext: (newAudioContext) => {
+      currentAudioContext = newAudioContext;
+    },
     attemptToConnect: () => {
       if (disposed) {
         throw new Error("SharedElementSourceNode has been disposed");
       }
-      if (!connected && ref.current) {
-        const mediaElementSourceNode = audioContext.createMediaElementSource(ref.current);
+      if (!connected && ref.current && currentAudioContext) {
+        const mediaElementSourceNode = currentAudioContext.createMediaElementSource(ref.current);
         connected = mediaElementSourceNode;
       }
     },
@@ -6846,19 +6964,22 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
   const audioCtx = useContext21(SharedAudioContext);
   const audioContext = audioCtx?.audioContext ?? null;
   const resume = audioCtx?.resume;
-  const refs = useMemo22(() => {
+  const [refs] = useState10(() => {
     return new Array(numberOfAudioTags).fill(true).map(() => {
       const ref = createRef2();
       return {
         id: Math.random(),
         ref,
-        mediaElementSourceNode: audioContext ? makeSharedElementSourceNode({
+        mediaElementSourceNode: makeSharedElementSourceNode({
           audioContext,
           ref
-        }) : null
+        })
       };
     });
-  }, [audioContext, numberOfAudioTags]);
+  });
+  for (const { mediaElementSourceNode } of refs) {
+    mediaElementSourceNode?.setAudioContext(audioContext);
+  }
   const effectToUse = React20.useInsertionEffect ?? React20.useLayoutEffect;
   effectToUse(() => {
     return () => {
@@ -6926,7 +7047,7 @@ var SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
     const cloned = [...takenAudios.current];
     const index = refs.findIndex((r) => r.id === id);
     if (index === -1) {
-      throw new TypeError("Error occured in ");
+      throw new TypeError(`Unknown audio ref ${id}; refs: ${refs.map((r) => r.id).join(", ")}`);
     }
     cloned[index] = false;
     takenAudios.current = cloned;
@@ -7030,10 +7151,10 @@ var useSharedAudio = ({
       return tagsCtx.registerAudio({ aud, audioId, premounting, postmounting });
     }
     const el = React20.createRef();
-    const mediaElementSourceNode = audioCtx?.audioContext ? makeSharedElementSourceNode({
-      audioContext: audioCtx.audioContext,
+    const mediaElementSourceNode = makeSharedElementSourceNode({
+      audioContext: audioCtx?.audioContext ?? null,
       ref: el
-    }) : null;
+    });
     return {
       el,
       id: Math.random(),
@@ -7048,6 +7169,7 @@ var useSharedAudio = ({
       }
     };
   });
+  elem.mediaElementSourceNode?.setAudioContext(audioCtx?.audioContext ?? null);
   const effectToUse = React20.useInsertionEffect ?? React20.useLayoutEffect;
   if (typeof document !== "undefined") {
     effectToUse(() => {
@@ -9013,7 +9135,9 @@ var solidSchema = {
     description: "Pixel density",
     hiddenFromList: false
   },
-  ...transformSchema
+  ...transformSchema,
+  ...backgroundSchema,
+  ...borderSchema
 };
 var SolidInner = ({
   color,
@@ -9268,7 +9392,7 @@ var HtmlInCanvasContent = forwardRef9(({
   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;
@@ -9322,7 +9446,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) {
@@ -9423,6 +9547,7 @@ var HtmlInCanvasContent = forwardRef9(({
     chainState,
     continueRender2,
     cancelRender2,
+    delayRender2,
     resolvedPixelDensity,
     canRetryMissingPaintRecord
   ]);
@@ -9474,14 +9599,14 @@ 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]);
+  }, [width, height, continueRender2, delayRender2, canvasSizeKey]);
   const innerStyle = useMemo31(() => {
     return {
       width,
@@ -9577,7 +9702,9 @@ var htmlInCanvasSchema = {
     description: "Pixel density",
     hiddenFromList: false
   },
-  ...transformSchema
+  ...transformSchema,
+  ...backgroundSchema,
+  ...borderSchema
 };
 var HtmlInCanvasWrapped = withInteractivitySchema({
   Component: HtmlInCanvasInner,
@@ -9615,6 +9742,7 @@ function truncateSrcForLabel(src) {
 import { jsx as jsx26 } from "react/jsx-runtime";
 var canvasImageSchema = {
   ...baseSchema,
+  ...premountSchema,
   fit: {
     type: "enum",
     default: "fill",
@@ -9625,7 +9753,9 @@ var canvasImageSchema = {
       cover: {}
     }
   },
-  ...transformSchema
+  ...transformSchema,
+  ...backgroundSchema,
+  ...borderSchema
 };
 var makeAbortError = () => {
   if (typeof DOMException !== "undefined") {
@@ -9949,6 +10079,10 @@ var CanvasImageInner = forwardRef10(({
   from,
   trimBefore,
   freeze,
+  premountFor,
+  postmountFor,
+  styleWhilePremounted,
+  styleWhilePostmounted,
   hidden,
   name,
   showInTimeline,
@@ -9966,39 +10100,65 @@ var CanvasImageInner = forwardRef10(({
   useImperativeHandle7(ref, () => {
     return actualRef.current;
   }, []);
-  return /* @__PURE__ */ jsx26(Sequence, {
-    layout: "none",
+  const {
+    effectivePostmountFor,
+    effectivePremountFor,
+    freezeFrame,
+    isPremountingOrPostmounting,
+    postmountingActive,
+    premountingActive,
+    premountingStyle
+  } = usePremounting({
     from: from ?? 0,
-    trimBefore,
     durationInFrames: durationInFrames ?? Infinity,
-    freeze,
-    hidden,
-    showInTimeline: showInTimeline ?? true,
-    name: name ?? "<CanvasImage>",
-    _remotionInternalDocumentationLink: _remotionInternalDocumentationLink ?? "https://www.remotion.dev/docs/canvasimage",
-    controls,
-    _remotionInternalEffects: memoizedEffectDefinitions,
-    _remotionInternalIsMedia: { type: "image", src },
-    _remotionInternalStack: stack,
-    outlineRef: outlineRef ?? actualRef,
-    children: /* @__PURE__ */ jsx26(CanvasImageContent, {
-      ref: actualRef,
-      src,
-      width,
-      height,
-      fit,
-      effects,
+    premountFor: premountFor ?? null,
+    postmountFor: postmountFor ?? null,
+    style: style ?? null,
+    styleWhilePremounted: styleWhilePremounted ?? null,
+    styleWhilePostmounted: styleWhilePostmounted ?? null,
+    hideWhilePremounted: "display-none"
+  });
+  return /* @__PURE__ */ jsx26(Freeze, {
+    frame: freezeFrame,
+    active: isPremountingOrPostmounting,
+    children: /* @__PURE__ */ jsx26(Sequence, {
+      layout: "none",
+      from: from ?? 0,
+      trimBefore,
+      durationInFrames: durationInFrames ?? Infinity,
+      freeze,
+      hidden,
+      showInTimeline: showInTimeline ?? true,
+      name: name ?? "<CanvasImage>",
+      _remotionInternalDocumentationLink: _remotionInternalDocumentationLink ?? "https://www.remotion.dev/docs/canvasimage",
       controls,
-      className,
-      style,
-      id,
-      onError,
-      pauseWhenLoading,
-      maxRetries,
-      delayRenderRetries,
-      delayRenderTimeoutInMilliseconds,
-      refForOutline: outlineRef ?? null,
-      ...canvasProps
+      _remotionInternalEffects: memoizedEffectDefinitions,
+      _remotionInternalIsMedia: { type: "image", src },
+      _remotionInternalStack: stack,
+      _remotionInternalPremountDisplay: effectivePremountFor || null,
+      _remotionInternalPostmountDisplay: effectivePostmountFor || null,
+      _remotionInternalIsPremounting: premountingActive,
+      _remotionInternalIsPostmounting: postmountingActive,
+      outlineRef: outlineRef ?? actualRef,
+      children: /* @__PURE__ */ jsx26(CanvasImageContent, {
+        ref: actualRef,
+        src,
+        width,
+        height,
+        fit,
+        effects,
+        controls,
+        className,
+        style: premountingStyle ?? undefined,
+        id,
+        onError,
+        pauseWhenLoading,
+        maxRetries,
+        delayRenderRetries,
+        delayRenderTimeoutInMilliseconds,
+        refForOutline: outlineRef ?? null,
+        ...canvasProps
+      })
     })
   });
 });
@@ -10258,6 +10418,11 @@ var NativeImgInner = ({
   trimBefore,
   durationInFrames,
   freeze,
+  premountFor,
+  postmountFor,
+  style,
+  styleWhilePremounted,
+  styleWhilePostmounted,
   controls,
   outlineRef: refForOutline,
   ...props2
@@ -10265,24 +10430,51 @@ var NativeImgInner = ({
   if (!src) {
     throw new Error('No "src" prop was passed to <Img>.');
   }
-  return /* @__PURE__ */ jsx28(Sequence, {
-    layout: "none",
+  const {
+    effectivePostmountFor,
+    effectivePremountFor,
+    freezeFrame,
+    isPremountingOrPostmounting,
+    postmountingActive,
+    premountingActive,
+    premountingStyle
+  } = usePremounting({
     from: from ?? 0,
-    trimBefore,
     durationInFrames: durationInFrames ?? Infinity,
-    freeze,
-    _remotionInternalStack: stack,
-    _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img",
-    _remotionInternalIsMedia: { type: "image", src },
-    name: name ?? "<Img>",
-    controls,
-    showInTimeline: showInTimeline ?? true,
-    hidden,
-    outlineRef: refForOutline,
-    children: /* @__PURE__ */ jsx28(ImgContent, {
-      src,
-      refForOutline,
-      ...props2
+    premountFor: premountFor ?? null,
+    postmountFor: postmountFor ?? null,
+    style: style ?? null,
+    styleWhilePremounted: styleWhilePremounted ?? null,
+    styleWhilePostmounted: styleWhilePostmounted ?? null,
+    hideWhilePremounted: "display-none"
+  });
+  return /* @__PURE__ */ jsx28(Freeze, {
+    frame: freezeFrame,
+    active: isPremountingOrPostmounting,
+    children: /* @__PURE__ */ jsx28(Sequence, {
+      layout: "none",
+      from: from ?? 0,
+      trimBefore,
+      durationInFrames: durationInFrames ?? Infinity,
+      freeze,
+      _remotionInternalStack: stack,
+      _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img",
+      _remotionInternalIsMedia: { type: "image", src },
+      _remotionInternalPremountDisplay: effectivePremountFor || null,
+      _remotionInternalPostmountDisplay: effectivePostmountFor || null,
+      _remotionInternalIsPremounting: premountingActive,
+      _remotionInternalIsPostmounting: postmountingActive,
+      name: name ?? "<Img>",
+      controls,
+      showInTimeline: showInTimeline ?? true,
+      hidden,
+      outlineRef: refForOutline,
+      children: /* @__PURE__ */ jsx28(ImgContent, {
+        src,
+        refForOutline,
+        style: premountingStyle ?? undefined,
+        ...props2
+      })
     })
   });
 };
@@ -10295,7 +10487,10 @@ var imgSchema = {
     keyframable: false
   },
   ...baseSchema,
-  ...transformSchema
+  ...premountSchema,
+  ...transformSchema,
+  ...backgroundSchema,
+  ...borderSchema
 };
 var imgCanvasFallbackIncompatibleProps = new Set([
   "alt",
@@ -10351,6 +10546,10 @@ var ImgInner = ({
   trimBefore,
   durationInFrames,
   freeze,
+  premountFor,
+  postmountFor,
+  styleWhilePremounted,
+  styleWhilePostmounted,
   controls,
   width,
   height,
@@ -10377,6 +10576,10 @@ var ImgInner = ({
       trimBefore,
       durationInFrames,
       freeze,
+      premountFor,
+      postmountFor,
+      styleWhilePremounted,
+      styleWhilePostmounted,
       controls,
       width,
       height,
@@ -10420,6 +10623,10 @@ var ImgInner = ({
     trimBefore,
     durationInFrames,
     freeze,
+    premountFor,
+    postmountFor,
+    styleWhilePremounted,
+    styleWhilePostmounted,
     hidden,
     name: name ?? "<Img>",
     showInTimeline,
@@ -10461,7 +10668,20 @@ var interactiveElementSchema = {
   ...baseSchema,
   ...transformSchema
 };
+var interactiveBackgroundElementSchema = {
+  ...interactiveElementSchema,
+  ...backgroundSchema
+};
+var interactiveBorderElementSchema = {
+  ...interactiveBackgroundElementSchema,
+  ...borderSchema
+};
 var interactiveTextElementSchema = {
+  ...interactiveBorderElementSchema,
+  ...textSchema,
+  ...textContentSchema
+};
+var interactiveSvgTextElementSchema = {
   ...interactiveElementSchema,
   ...textSchema,
   ...textContentSchema
@@ -10540,6 +10760,8 @@ var Interactive = {
   baseSchema,
   transformSchema,
   textSchema,
+  backgroundSchema,
+  borderSchema,
   premountSchema,
   sequenceSchema,
   withSchema,
@@ -10576,13 +10798,44 @@ var Interactive = {
   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>"),
+  Svg: makeInteractiveElement("svg", "<Interactive.Svg>", interactiveBorderElementSchema),
+  Text: makeInteractiveElement("text", "<Interactive.Text>", interactiveSvgTextElementSchema),
   Ul: makeInteractiveTextElement("ul", "<Interactive.Ul>")
 };
 // src/internals.ts
 import { createRef as createRef3 } from "react";
 
+// src/animated-image/get-duration-in-seconds.ts
+var getAnimatedImageDurationInSeconds = async ({
+  resolvedSrc,
+  signal,
+  requestInit,
+  contentType
+}) => {
+  const { decoder, selectedTrack } = await createImageDecoder({
+    resolvedSrc,
+    signal,
+    requestInit,
+    contentType
+  });
+  try {
+    const { image } = await decoder.decode({
+      frameIndex: selectedTrack.frameCount - 1,
+      completeFramesOnly: true
+    });
+    try {
+      if (image.duration === null) {
+        throw new Error("Could not determine animated image duration");
+      }
+      return (image.timestamp + image.duration) / 1e6;
+    } finally {
+      image.close();
+    }
+  } finally {
+    decoder.close();
+  }
+};
+
 // src/CompositionManager.tsx
 import React31 from "react";
 var compositionsRef = React31.createRef();
@@ -12005,6 +12258,7 @@ var Internals = {
   useAbsoluteTimelinePosition,
   evaluateVolume,
   getAbsoluteSrc,
+  getAnimatedImageDurationInSeconds,
   getAssetDisplayName,
   Timeline: exports_timeline_position_state,
   validateMediaTrimProps,
@@ -12029,7 +12283,6 @@ var Internals = {
   textSchema,
   transformSchema,
   premountSchema,
-  premountStyleSchema,
   flattenActiveSchema,
   getFlatSchemaWithAllKeys,
   RemotionRootContexts,
@@ -12179,6 +12432,7 @@ var seriesSequenceSchema = {
   hidden: Interactive.sequenceSchema.hidden,
   showInTimeline: Interactive.sequenceSchema.showInTimeline,
   freeze: Interactive.baseSchema.freeze,
+  trimBefore: Interactive.sequenceSchema.trimBefore,
   layout: Interactive.sequenceSchema.layout
 };
 var SeriesSequenceInner = forwardRef14(({