@remotion/promo-pages 4.0.496 → 4.0.497

package/dist/Homepage.js

@@ -2349,7 +2349,7 @@ var getSingleChildComponent = (children) => {
   }
   return child.type;
 };
-var VERSION = "4.0.496";
+var VERSION = "4.0.497";
 var checkMultipleRemotionVersions = () => {
   if (typeof globalThis === "undefined") {
     return;
@@ -2827,6 +2827,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",
@@ -2854,20 +2893,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 = {
@@ -6203,38 +6235,53 @@ var CanvasRefForwardingFunction = ({ width, height, fit, className, style, effec
   });
 };
 var Canvas = React16.forwardRef(CanvasRefForwardingFunction);
-var CACHE_SIZE = 5;
-var getActualTime = ({
-  loopBehavior,
-  durationFound,
-  timeInSec
-}) => {
-  return loopBehavior === "loop" ? durationFound ? timeInSec % durationFound : timeInSec : Math.min(timeInSec, durationFound || Infinity);
-};
-var decodeImage = async ({
+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 };
+};
+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) => {
@@ -6340,6 +6387,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
   };
@@ -6377,6 +6431,7 @@ var animatedImageSchema = {
     keyframable: false
   },
   ...baseSchema,
+  ...premountSchema,
   playbackRate: {
     type: "number",
     min: 0,
@@ -6387,7 +6442,9 @@ var animatedImageSchema = {
     hiddenFromList: false,
     keyframable: false
   },
-  ...transformSchema
+  ...transformSchema,
+  ...backgroundSchema,
+  ...borderSchema
 };
 var getCanvasPropsFromSequenceProps = (props) => {
   const canvasProps = {};
@@ -6439,6 +6496,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,
@@ -6446,22 +6512,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,
@@ -6471,6 +6546,11 @@ var AnimatedImageContent = forwardRef4(({
     initialLoopBehavior,
     continueRender2
   ]);
+  useEffect5(() => {
+    return () => {
+      imageDecoder?.close();
+    };
+  }, [imageDecoder]);
   useLayoutEffect2(() => {
     if (!imageDecoder) {
       return;
@@ -6540,6 +6620,11 @@ var AnimatedImageInner = ({
   className,
   style,
   durationInFrames,
+  from,
+  premountFor,
+  postmountFor,
+  styleWhilePremounted,
+  styleWhilePostmounted,
   requestInit,
   effects = [],
   controls,
@@ -6551,6 +6636,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,
@@ -6562,24 +6665,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
+      })
     })
   });
 };
@@ -7295,13 +7407,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;
       }
     },
@@ -7629,19 +7745,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 () => {
@@ -7709,7 +7828,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;
@@ -7813,10 +7932,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(),
@@ -7831,6 +7950,7 @@ var useSharedAudio = ({
       }
     };
   });
+  elem.mediaElementSourceNode?.setAudioContext(audioCtx?.audioContext ?? null);
   const effectToUse = React20.useInsertionEffect ?? React20.useLayoutEffect;
   if (typeof document !== "undefined") {
     effectToUse(() => {
@@ -9688,7 +9808,9 @@ var solidSchema = {
     description: "Pixel density",
     hiddenFromList: false
   },
-  ...transformSchema
+  ...transformSchema,
+  ...backgroundSchema,
+  ...borderSchema
 };
 var SolidInner = ({
   color,
@@ -10242,7 +10364,9 @@ var htmlInCanvasSchema = {
     description: "Pixel density",
     hiddenFromList: false
   },
-  ...transformSchema
+  ...transformSchema,
+  ...backgroundSchema,
+  ...borderSchema
 };
 var HtmlInCanvasWrapped = withInteractivitySchema({
   Component: HtmlInCanvasInner,
@@ -10264,6 +10388,7 @@ function truncateSrcForLabel(src) {
 }
 var canvasImageSchema = {
   ...baseSchema,
+  ...premountSchema,
   fit: {
     type: "enum",
     default: "fill",
@@ -10274,7 +10399,9 @@ var canvasImageSchema = {
       cover: {}
     }
   },
-  ...transformSchema
+  ...transformSchema,
+  ...backgroundSchema,
+  ...borderSchema
 };
 var makeAbortError = () => {
   if (typeof DOMException !== "undefined") {
@@ -10598,6 +10725,10 @@ var CanvasImageInner = forwardRef10(({
   from,
   trimBefore,
   freeze,
+  premountFor,
+  postmountFor,
+  styleWhilePremounted,
+  styleWhilePostmounted,
   hidden,
   name,
   showInTimeline,
@@ -10615,39 +10746,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
+      })
     })
   });
 });
@@ -10864,6 +11021,11 @@ var NativeImgInner = ({
   trimBefore,
   durationInFrames,
   freeze,
+  premountFor,
+  postmountFor,
+  style,
+  styleWhilePremounted,
+  styleWhilePostmounted,
   controls,
   outlineRef: refForOutline,
   ...props2
@@ -10871,24 +11033,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
+      })
     })
   });
 };
@@ -10901,7 +11090,10 @@ var imgSchema = {
     keyframable: false
   },
   ...baseSchema,
-  ...transformSchema
+  ...premountSchema,
+  ...transformSchema,
+  ...backgroundSchema,
+  ...borderSchema
 };
 var imgCanvasFallbackIncompatibleProps = new Set([
   "alt",
@@ -10957,6 +11149,10 @@ var ImgInner = ({
   trimBefore,
   durationInFrames,
   freeze,
+  premountFor,
+  postmountFor,
+  styleWhilePremounted,
+  styleWhilePostmounted,
   controls,
   width,
   height,
@@ -10983,6 +11179,10 @@ var ImgInner = ({
       trimBefore,
       durationInFrames,
       freeze,
+      premountFor,
+      postmountFor,
+      styleWhilePremounted,
+      styleWhilePostmounted,
       controls,
       width,
       height,
@@ -11026,6 +11226,10 @@ var ImgInner = ({
     trimBefore,
     durationInFrames,
     freeze,
+    premountFor,
+    postmountFor,
+    styleWhilePremounted,
+    styleWhilePostmounted,
     hidden,
     name: name ?? "<Img>",
     showInTimeline,
@@ -11064,7 +11268,20 @@ var interactiveElementSchema = {
   ...baseSchema,
   ...transformSchema
 };
+var interactiveBackgroundElementSchema = {
+  ...interactiveElementSchema,
+  ...backgroundSchema
+};
+var interactiveBorderElementSchema = {
+  ...interactiveBackgroundElementSchema,
+  ...borderSchema
+};
 var interactiveTextElementSchema = {
+  ...interactiveBorderElementSchema,
+  ...textSchema,
+  ...textContentSchema
+};
+var interactiveSvgTextElementSchema = {
   ...interactiveElementSchema,
   ...textSchema,
   ...textContentSchema
@@ -11143,6 +11360,8 @@ var Interactive = {
   baseSchema,
   transformSchema,
   textSchema,
+  backgroundSchema,
+  borderSchema,
   premountSchema,
   sequenceSchema,
   withSchema,
@@ -11179,10 +11398,39 @@ 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>")
 };
+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();
+  }
+};
 var compositionsRef = React31.createRef();
 var CompositionManagerProvider = ({
   children,
@@ -12410,6 +12658,7 @@ var Internals = {
   useAbsoluteTimelinePosition,
   evaluateVolume,
   getAbsoluteSrc,
+  getAnimatedImageDurationInSeconds,
   getAssetDisplayName,
   Timeline: exports_timeline_position_state,
   validateMediaTrimProps,
@@ -12434,7 +12683,6 @@ var Internals = {
   textSchema,
   transformSchema,
   premountSchema,
-  premountStyleSchema,
   flattenActiveSchema,
   getFlatSchemaWithAllKeys,
   RemotionRootContexts,
@@ -12573,6 +12821,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(({
@@ -18194,7 +18443,9 @@ var makeShapeSchema = (shapeFields) => {
       defaultValue: "#0b84ff",
       description: "Fill"
     }),
-    ...Internals.transformSchema
+    ...Internals.transformSchema,
+    ...Interactive.backgroundSchema,
+    ...Interactive.borderSchema
   };
 };
 var arrowSchema = makeShapeSchema({
@@ -30950,6 +31201,45 @@ var transformSchema2 = {
     hiddenFromList: false
   }
 };
+var borderSchema2 = {
+  "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 backgroundSchema2 = {
+  "style.backgroundColor": {
+    type: "color",
+    default: "transparent",
+    description: "Color"
+  }
+};
 var premountSchema2 = {
   premountFor: {
     type: "number",
@@ -30969,20 +31259,13 @@ var premountSchema2 = {
     keyframable: false
   }
 };
-var premountStyleSchema2 = {
-  styleWhilePremounted: {
-    type: "hidden"
-  },
-  styleWhilePostmounted: {
-    type: "hidden"
-  }
-};
 var sequencePremountSchema2 = {
-  ...premountSchema2,
-  ...premountStyleSchema2
+  ...premountSchema2
 };
 var sequenceStyleSchema2 = {
   ...transformSchema2,
+  ...backgroundSchema2,
+  ...borderSchema2,
   ...sequencePremountSchema2
 };
 var hiddenField2 = {
@@ -36542,6 +36825,10 @@ async function* makeLoopingIterator({
     passStartInSeconds = loopStartInSeconds;
   }
 }
+var MINIMUM_AUDIO_BUFFERING_TIME_SECONDS = 0.1;
+var hasEnoughAudioToStartPlayback = (bufferedDuration) => {
+  return bufferedDuration >= MINIMUM_AUDIO_BUFFERING_TIME_SECONDS;
+};
 var anchorToContinuousTime = ({
   anchor,
   unloopedTimeInSeconds,
@@ -36724,7 +37011,7 @@ var audioIteratorManager = ({
           onDone();
           return;
         }
-        onScheduled(result.value.timelineTimestamp);
+        onScheduled(result.value.sourceDurationInSeconds);
         notifyNodeScheduled();
         onAudioChunk({
           buffer: result.value,
@@ -36806,24 +37093,32 @@ var audioIteratorManager = ({
     });
     audioIteratorsCreated++;
     audioBufferIterator = iterator;
-    let chunksScheduled = 0;
+    let bufferedDuration = 0;
+    let hasUnblockedPlayback = false;
+    const unblockPlayback = () => {
+      if (hasUnblockedPlayback) {
+        return;
+      }
+      hasUnblockedPlayback = true;
+      delayHandle.unblock();
+    };
     proceedScheduling({
       iterator,
       nonce,
       getTargetTime,
       playbackRate,
       scheduleAudioNode,
-      onScheduled: () => {
-        chunksScheduled++;
-        if (chunksScheduled === 6) {
-          delayHandle.unblock();
+      onScheduled: (sourceDurationInSeconds) => {
+        bufferedDuration += sourceDurationInSeconds;
+        if (hasEnoughAudioToStartPlayback(bufferedDuration)) {
+          unblockPlayback();
         }
       },
       onDestroyed: () => {
-        delayHandle.unblock();
+        unblockPlayback();
       },
       onDone: () => {
-        delayHandle.unblock();
+        unblockPlayback();
       },
       logLevel,
       currentTime: sharedAudioContext.audioContext.currentTime,
@@ -41817,7 +42112,6 @@ var videoSchema = {
   },
   ...Internals.baseSchema,
   ...Internals.premountSchema,
-  ...Internals.premountStyleSchema,
   volume: {
     type: "number",
     min: 0,
@@ -41838,7 +42132,9 @@ var videoSchema = {
   },
   muted: { type: "boolean", default: false, description: "Muted" },
   loop: { type: "boolean", default: false, description: "Loop" },
-  ...Internals.transformSchema
+  ...Internals.transformSchema,
+  ...Interactive.backgroundSchema,
+  ...Interactive.borderSchema
 };
 var InnerVideo = ({
   src,
@@ -43441,7 +43737,7 @@ import {
 import { BufferTarget, StreamTarget } from "mediabunny";
 
 // ../core/dist/esm/version.mjs
-var VERSION2 = "4.0.496";
+var VERSION2 = "4.0.497";
 
 // ../web-renderer/dist/esm/index.mjs
 import { AudioSample, VideoSample } from "mediabunny";
@@ -45074,6 +45370,67 @@ var hasScaleCssValue = (style2) => {
 var hasAnyTransformCssValue = (style2) => {
   return hasTransformCssValue(style2) || hasRotateCssValue(style2) || hasScaleCssValue(style2);
 };
+var parseScaleComponent = (component) => {
+  if (component.endsWith("%")) {
+    return Number(component.slice(0, -1)) / 100;
+  }
+  return Number(component);
+};
+var parseScale = (transform) => {
+  const match = /^scale\((.*)\)$/.exec(transform);
+  if (!match) {
+    return null;
+  }
+  const scaleValue = match[1].trim();
+  if (scaleValue === "") {
+    return null;
+  }
+  const components = scaleValue.split(/\s+/).map(parseScaleComponent);
+  if (components.length < 1 || components.length > 3 || components.some((component) => !Number.isFinite(component))) {
+    return null;
+  }
+  return {
+    x: components[0],
+    y: components[1] ?? components[0],
+    z: components[2] ?? 1
+  };
+};
+var parseAxisRotate = (transform) => {
+  const match = /^rotate\((.*)\)$/.exec(transform);
+  if (!match) {
+    return null;
+  }
+  const rotateValue = match[1].trim();
+  const keywordAxis = /^(x|y|z)\s+(.+)$/i.exec(rotateValue);
+  if (keywordAxis) {
+    const axisKeyword = keywordAxis[1].toLowerCase();
+    const angle = keywordAxis[2];
+    const rotateFunction = axisKeyword === "x" ? "rotateX" : axisKeyword === "y" ? "rotateY" : "rotate";
+    return `${rotateFunction}(${angle})`;
+  }
+  const vectorAxis = /^(\S+)\s+(\S+)\s+(\S+)\s+(.+)$/.exec(rotateValue);
+  if (!vectorAxis) {
+    return null;
+  }
+  const axisVector = vectorAxis.slice(1, 4).map(Number);
+  if (axisVector.some((component) => !Number.isFinite(component))) {
+    return null;
+  }
+  return `rotate3d(${axisVector.join(", ")}, ${vectorAxis[4]})`;
+};
+var makeDOMMatrix = (transform) => {
+  if (transform) {
+    const scale = parseScale(transform);
+    if (scale) {
+      return new DOMMatrix().scale(scale.x, scale.y, scale.z);
+    }
+    const axisRotate = parseAxisRotate(transform);
+    if (axisRotate) {
+      return new DOMMatrix(axisRotate);
+    }
+  }
+  return new DOMMatrix(transform);
+};
 var isValidColor = (color) => {
   try {
     const result = NoReactInternals.processColor(color);
@@ -45471,15 +45828,15 @@ var calculateTransforms = ({
     const hasApplicableTransformCssValue = canApplyCssTransforms({ computedStyle: transformStyle, element: parent }) && hasAnyTransformCssValue(transformStyle);
     if (hasApplicableTransformCssValue || parent === element) {
       const toParse = hasApplicableTransformCssValue && hasTransformCssValue(transformStyle) ? transformStyle.transform : undefined;
-      const matrix = new DOMMatrix(toParse);
+      const matrix = makeDOMMatrix(toParse);
       const resetTransforms = makeTransformResetter(parent);
       const { scale, rotate: rotate2 } = parent.style;
       const additionalMatrices = [];
       if (hasApplicableTransformCssValue && rotate2 !== "" && rotate2 !== "none") {
-        additionalMatrices.push(new DOMMatrix(`rotate(${rotate2})`));
+        additionalMatrices.push(makeDOMMatrix(`rotate(${rotate2})`));
       }
       if (hasApplicableTransformCssValue && scale !== "" && scale !== "none") {
-        additionalMatrices.push(new DOMMatrix(`scale(${scale})`));
+        additionalMatrices.push(makeDOMMatrix(`scale(${scale})`));
       }
       additionalMatrices.push(matrix);
       const cleanup = resetTransforms(hasApplicableTransformCssValue);