remotion 4.0.500 → 4.0.501

package/dist/cjs/Img.js

@@ -196,7 +196,7 @@ const ImgContent = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRende
     // blocks frame rendering.
     return (jsx_runtime_1.jsx("img", { ...props, ref: imageCallbackRef, crossOrigin: crossOriginValue, onError: didGetError, decoding: isRendering ? 'sync' : decoding }));
 };
-const NativeImgInner = ({ hidden, name, stack, showInTimeline, src, from, trimBefore, durationInFrames, freeze, premountFor, postmountFor, style, styleWhilePremounted, styleWhilePostmounted, cropLeft, cropRight, cropTop, cropBottom, controls, outlineRef: refForOutline, ...props }) => {
+const NativeImgInner = ({ hidden, name, showInTimeline, src, from, trimBefore, durationInFrames, freeze, premountFor, postmountFor, style, styleWhilePremounted, styleWhilePostmounted, cropLeft, cropRight, cropTop, cropBottom, controls, outlineRef: refForOutline, ...props }) => {
     if (!src) {
         throw new Error('No "src" prop was passed to <Img>.');
     }
@@ -218,7 +218,7 @@ const NativeImgInner = ({ hidden, name, stack, showInTimeline, src, from, trimBe
         style: premountingStyle,
         componentName: '<Img />',
     });
-    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, trimBefore: trimBefore, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, freeze: 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 !== null && name !== void 0 ? name : '<Img>', controls: controls, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, hidden: hidden, outlineRef: refForOutline, children: jsx_runtime_1.jsx(ImgContent, { src: src, refForOutline: refForOutline, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, ...props }) }) }));
+    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, trimBefore: trimBefore, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, freeze: freeze, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", _remotionInternalIsMedia: { type: 'image', src }, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, name: name !== null && name !== void 0 ? name : '<Img>', controls: controls, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, hidden: hidden, outlineRef: refForOutline, children: jsx_runtime_1.jsx(ImgContent, { src: src, refForOutline: refForOutline, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, ...props }) }) }));
 };
 const CanvasImageWithPrivateProps = index_js_1.CanvasImage;
 exports.imgSchema = {
@@ -234,6 +234,7 @@ exports.imgSchema = {
     ...interactivity_schema_js_1.transformSchema,
     ...interactivity_schema_js_1.backgroundSchema,
     ...interactivity_schema_js_1.borderSchema,
+    ...interactivity_schema_js_1.borderRadiusSchema,
 };
 const imgCanvasFallbackIncompatibleProps = new Set([
     'alt',
@@ -274,12 +275,12 @@ const getFitFromObjectFit = (style) => {
     }
     return undefined;
 };
-const ImgInner = ({ effects = [], ref, hidden, name, stack, showInTimeline, src, from, trimBefore, durationInFrames, freeze, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, controls, width, height, className, style, cropLeft, cropRight, cropTop, cropBottom, id, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...props }) => {
+const ImgInner = ({ effects = [], ref, hidden, name, showInTimeline, src, from, trimBefore, durationInFrames, freeze, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, controls, width, height, className, style, cropLeft, cropRight, cropTop, cropBottom, id, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...props }) => {
     var _a;
     const refForOutline = (0, react_1.useRef)(null);
     const shouldPauseWhenLoading = (0, v5_flag_js_1.resolveV5Default)(pauseWhenLoading);
     if (effects.length === 0) {
-        return (jsx_runtime_1.jsx(NativeImgInner, { ...props, ref: ref, hidden: hidden, name: name, stack: stack, showInTimeline: showInTimeline, src: src, from: from, trimBefore: trimBefore, durationInFrames: durationInFrames, freeze: freeze, premountFor: premountFor, postmountFor: postmountFor, styleWhilePremounted: styleWhilePremounted, styleWhilePostmounted: styleWhilePostmounted, controls: controls, width: width, height: height, className: className, style: style, cropLeft: cropLeft, cropRight: cropRight, cropTop: cropTop, cropBottom: cropBottom, id: id, pauseWhenLoading: shouldPauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, outlineRef: refForOutline }));
+        return (jsx_runtime_1.jsx(NativeImgInner, { ...props, ref: ref, hidden: hidden, name: name, showInTimeline: showInTimeline, src: src, from: from, trimBefore: trimBefore, durationInFrames: durationInFrames, freeze: freeze, premountFor: premountFor, postmountFor: postmountFor, styleWhilePremounted: styleWhilePremounted, styleWhilePostmounted: styleWhilePostmounted, controls: controls, width: width, height: height, className: className, style: style, cropLeft: cropLeft, cropRight: cropRight, cropTop: cropTop, cropBottom: cropBottom, id: id, pauseWhenLoading: shouldPauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, outlineRef: refForOutline }));
     }
     if (!src) {
         throw new Error('No "src" prop was passed to <Img>.');
@@ -294,7 +295,7 @@ const ImgInner = ({ effects = [], ref, hidden, name, stack, showInTimeline, src,
     const canvasHeight = typeof height === 'number' ? height : undefined;
     const canvasProps = props;
     const canvasFit = (_a = getFitFromObjectFit(style)) !== null && _a !== void 0 ? _a : 'fill';
-    return (jsx_runtime_1.jsx(CanvasImageWithPrivateProps, { src: src, width: canvasWidth, height: canvasHeight, fit: canvasFit, effects: effects, className: className, style: style, cropLeft: cropLeft, cropRight: cropRight, cropTop: cropTop, cropBottom: cropBottom, id: id, pauseWhenLoading: shouldPauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, from: from, trimBefore: trimBefore, durationInFrames: durationInFrames, freeze: freeze, premountFor: premountFor, postmountFor: postmountFor, styleWhilePremounted: styleWhilePremounted, styleWhilePostmounted: styleWhilePostmounted, hidden: hidden, name: name !== null && name !== void 0 ? name : '<Img>', showInTimeline: showInTimeline, stack: stack, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", _remotionInternalCropComponentName: "<Img />", controls: controls, outlineRef: refForOutline, ...canvasProps }));
+    return (jsx_runtime_1.jsx(CanvasImageWithPrivateProps, { src: src, width: canvasWidth, height: canvasHeight, fit: canvasFit, effects: effects, className: className, style: style, cropLeft: cropLeft, cropRight: cropRight, cropTop: cropTop, cropBottom: cropBottom, id: id, pauseWhenLoading: shouldPauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, from: from, trimBefore: trimBefore, durationInFrames: durationInFrames, freeze: freeze, premountFor: premountFor, postmountFor: postmountFor, styleWhilePremounted: styleWhilePremounted, styleWhilePostmounted: styleWhilePostmounted, hidden: hidden, name: name !== null && name !== void 0 ? name : '<Img>', showInTimeline: showInTimeline, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", _remotionInternalCropComponentName: "<Img />", controls: controls, outlineRef: refForOutline, ...canvasProps }));
 };
 /*
  * @description Works just like a regular HTML img tag. When you use the <Img> tag, Remotion will ensure that the image is loaded before rendering the frame.

package/dist/cjs/Interactive.d.ts

@@ -10,12 +10,7 @@ export type InteractiveBaseProps = Pick<SequenceProps, 'durationInFrames' | 'fro
 export type InteractiveTransformProps = Pick<AbsoluteFillLayout, 'style'>;
 export type InteractiveCropProps = Pick<SequenceProps, 'cropLeft' | 'cropRight' | 'cropTop' | 'cropBottom'>;
 export type InteractivePremountProps = Pick<AbsoluteFillLayout, 'premountFor' | 'postmountFor' | 'styleWhilePremounted' | 'styleWhilePostmounted'>;
-type InteractiveSequenceProps = InteractiveBaseProps & {
-    /**
-     * @deprecated For internal use only
-     */
-    readonly stack?: string;
-};
+type InteractiveSequenceProps = InteractiveBaseProps;
 type InteractiveElementProps<Tag extends InteractiveTag> = Omit<React.ComponentPropsWithoutRef<Tag>, keyof InteractiveSequenceProps> & InteractiveSequenceProps;
 type InteractiveElementComponent<Tag extends InteractiveTag> = React.ComponentType<InteractiveElementProps<Tag> & React.RefAttributes<ElementForTag<Tag>>>;
 type RemotionComponentIdentityPackage = 'remotion' | `@remotion/${string}`;
@@ -54,6 +49,14 @@ export declare const Interactive: {
         readonly name: import("./interactivity-schema.js").HiddenFieldSchema;
         readonly showInTimeline: import("./interactivity-schema.js").HiddenFieldSchema;
     };
+    captionsSchema: {
+        readonly captions: {
+            readonly type: "remotion-captions";
+            readonly default: undefined;
+            readonly description: "Captions";
+            readonly keyframable: false;
+        };
+    };
     transformSchema: {
         readonly 'style.transformOrigin': {
             readonly type: "transform-origin";
@@ -207,6 +210,49 @@ export declare const Interactive: {
             readonly description: "Border color";
         };
     };
+    borderRadiusSchema: {
+        readonly 'style.borderRadius': {
+            readonly type: "number";
+            readonly default: 0;
+            readonly min: 0;
+            readonly step: 1;
+            readonly description: "Border radius";
+            readonly hiddenFromList: false;
+            readonly keyframable: true;
+        };
+        readonly 'style.borderTopLeftRadius': {
+            readonly type: "number";
+            readonly default: 0;
+            readonly min: 0;
+            readonly step: 1;
+            readonly description: "Top left radius";
+            readonly hiddenFromList: false;
+        };
+        readonly 'style.borderTopRightRadius': {
+            readonly type: "number";
+            readonly default: 0;
+            readonly min: 0;
+            readonly step: 1;
+            readonly description: "Top right radius";
+            readonly hiddenFromList: false;
+        };
+        readonly 'style.borderBottomRightRadius': {
+            readonly type: "number";
+            readonly default: 0;
+            readonly min: 0;
+            readonly step: 1;
+            readonly description: "Bottom right radius";
+            readonly hiddenFromList: false;
+        };
+        readonly 'style.borderBottomLeftRadius': {
+            readonly type: "number";
+            readonly default: 0;
+            readonly min: 0;
+            readonly step: 1;
+            readonly description: "Bottom left radius";
+            readonly hiddenFromList: false;
+        };
+    };
     cropSchema: {
         readonly cropLeft: {
             readonly type: "number";
@@ -404,6 +450,47 @@ export declare const Interactive: {
                         readonly default: undefined;
                         readonly description: "Border color";
                     };
+                    readonly 'style.borderRadius': {
+                        readonly type: "number";
+                        readonly default: 0;
+                        readonly min: 0;
+                        readonly step: 1;
+                        readonly description: "Border radius";
+                        readonly hiddenFromList: false;
+                        readonly keyframable: true;
+                    };
+                    readonly 'style.borderTopLeftRadius': {
+                        readonly type: "number";
+                        readonly default: 0;
+                        readonly min: 0;
+                        readonly step: 1;
+                        readonly description: "Top left radius";
+                        readonly hiddenFromList: false;
+                    };
+                    readonly 'style.borderTopRightRadius': {
+                        readonly type: "number";
+                        readonly default: 0;
+                        readonly min: 0;
+                        readonly step: 1;
+                        readonly description: "Top right radius";
+                        readonly hiddenFromList: false;
+                    };
+                    readonly 'style.borderBottomRightRadius': {
+                        readonly type: "number";
+                        readonly default: 0;
+                        readonly min: 0;
+                        readonly step: 1;
+                        readonly description: "Bottom right radius";
+                        readonly hiddenFromList: false;
+                    };
+                    readonly 'style.borderBottomLeftRadius': {
+                        readonly type: "number";
+                        readonly default: 0;
+                        readonly min: 0;
+                        readonly step: 1;
+                        readonly description: "Bottom left radius";
+                        readonly hiddenFromList: false;
+                    };
                     readonly 'style.backgroundColor': {
                         readonly type: "color";
                         readonly default: "transparent";

package/dist/cjs/Interactive.js

@@ -66,6 +66,7 @@ const interactiveBackgroundElementSchema = {
 const interactiveBorderElementSchema = {
     ...interactiveBackgroundElementSchema,
     ...interactivity_schema_js_1.borderSchema,
+    ...interactivity_schema_js_1.borderRadiusSchema,
 };
 const interactiveTextElementSchema = {
     ...interactiveBorderElementSchema,
@@ -105,13 +106,13 @@ const withSchema = (options) => {
 };
 const makeInteractiveElement = (tag, displayName, schema) => {
     const Inner = (0, react_1.forwardRef)((propsWithControls, ref) => {
-        const { durationInFrames, from, trimBefore, freeze, hidden, name, showInTimeline, stack, controls, ...props } = propsWithControls;
+        const { durationInFrames, from, trimBefore, freeze, hidden, name, showInTimeline, controls, ...props } = propsWithControls;
         const refForOutline = (0, react_1.useRef)(null);
         const callbackRef = (0, react_1.useCallback)((element) => {
             refForOutline.current = element;
             setRef(ref, element);
         }, [ref]);
-        return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, trimBefore: trimBefore, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, freeze: freeze, hidden: hidden, name: name !== null && name !== void 0 ? name : displayName, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, controls: controls, _remotionInternalStack: stack, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/interactive", outlineRef: refForOutline, children: react_1.default.createElement(tag, {
+        return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, trimBefore: trimBefore, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, freeze: freeze, hidden: hidden, name: name !== null && name !== void 0 ? name : displayName, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, controls: controls, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/interactive", outlineRef: refForOutline, children: react_1.default.createElement(tag, {
                 ...props,
                 ref: callbackRef,
             }) }));
@@ -144,10 +145,12 @@ const makeInteractiveSvgStrokeElement = (tag, displayName) => {
  */
 exports.Interactive = {
     baseSchema: interactivity_schema_js_1.baseSchema,
+    captionsSchema: interactivity_schema_js_1.captionsSchema,
     transformSchema: interactivity_schema_js_1.transformSchema,
     textSchema: interactivity_schema_js_1.textSchema,
     backgroundSchema: interactivity_schema_js_1.backgroundSchema,
     borderSchema: interactivity_schema_js_1.borderSchema,
+    borderRadiusSchema: interactivity_schema_js_1.borderRadiusSchema,
     cropSchema: interactivity_schema_js_1.cropSchema,
     svgPaintSchema: interactivity_schema_js_1.svgPaintSchema,
     svgStrokeSchema: interactivity_schema_js_1.svgStrokeSchema,

package/dist/cjs/Sequence.js

@@ -4,7 +4,8 @@ exports.SequenceWithoutFrom = exports.Sequence = exports.SequenceWithoutSchema =
 const jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable @typescript-eslint/no-use-before-define */
 const react_1 = require("react");
-const AbsoluteFill_js_1 = require("./AbsoluteFill.js");
+const AbsoluteFillElement_js_1 = require("./AbsoluteFillElement.js");
+const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
 const freeze_js_1 = require("./freeze.js");
 const interactivity_schema_js_1 = require("./interactivity-schema.js");
 const nonce_js_1 = require("./nonce.js");
@@ -20,7 +21,7 @@ const v5_flag_js_1 = require("./v5-flag.js");
 const with_interactivity_schema_js_1 = require("./with-interactivity-schema.js");
 const EMPTY_EFFECTS = [];
 const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze, durationInFrames = Infinity, children, name, height, width, showInTimeline = true, hidden = false, controls, _remotionInternalEffects, _remotionInternalLoopDisplay: loopDisplay, _remotionInternalStack: stack, _remotionInternalDocumentationLink: documentationLink, _remotionInternalSingleChildComponent: singleChildComponent, _remotionInternalPremountDisplay: premountDisplay, _remotionInternalPostmountDisplay: postmountDisplay, _remotionInternalIsMedia: isMedia, outlineRef: passedRefForOutline, cropLeft, cropRight, cropTop, cropBottom, ...other }, ref) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const { layout = 'absolute-fill' } = other;
     const [id] = (0, react_1.useState)(() => String(Math.random()));
     const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
@@ -162,14 +163,15 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
     const resolvedDocumentationLink = documentationLink !== null && documentationLink !== void 0 ? documentationLink : 'https://www.remotion.dev/docs/sequence';
     const env = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     const isInsideSeries = (0, react_1.useContext)(is_inside_series_js_1.IsInsideSeriesContext);
-    const inheritedStack = (_b = other === null || other === void 0 ? void 0 : other.stack) !== null && _b !== void 0 ? _b : null;
     // Our assumption: Stack doesnt' change. After we symbolicate we assign it a nodePath
     // and if it changes, it would lead to-remounting of the sequence.
     const stackRef = (0, react_1.useRef)(null);
-    stackRef.current = stack !== null && stack !== void 0 ? stack : inheritedStack;
+    stackRef.current = controls
+        ? ((_c = (_b = (0, enable_sequence_stack_traces_js_1.getStackForControls)(controls)) !== null && _b !== void 0 ? _b : stack) !== null && _c !== void 0 ? _c : null)
+        : (stack !== null && stack !== void 0 ? stack : null);
     const registeredFrozenFrame = typeof freeze === 'number' ? freeze : null;
     const registeredTrimBefore = trimBefore === 0 ? null : trimBefore;
-    const parentCumulatedNegativeFrom = (_c = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.cumulatedNegativeFrom) !== null && _c !== void 0 ? _c : 0;
+    const parentCumulatedNegativeFrom = (_d = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.cumulatedNegativeFrom) !== null && _d !== void 0 ? _d : 0;
     const startMediaFrom = isMedia && isMedia.type !== 'image'
         ? isMedia.data.startMediaFrom +
             parentCumulatedNegativeFrom -
@@ -323,7 +325,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
         right: resolvedCropRight,
         top: resolvedCropTop,
         bottom: resolvedCropBottom,
-        borderRadius: styleIfThere === null || styleIfThere === void 0 ? void 0 : styleIfThere.borderRadius,
+        style: styleIfThere,
     });
     const sequenceRef = (0, react_1.useCallback)((node) => {
         wrapperRefForOutline.current = node;
@@ -353,7 +355,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
     if (hidden) {
         return null;
     }
-    return (jsx_runtime_1.jsx(SequenceContext_js_1.SequenceContext.Provider, { value: contextValue, children: frozenContent === null ? null : other.layout === 'none' ? (frozenContent) : (jsx_runtime_1.jsx(AbsoluteFill_js_1.AbsoluteFill, { ref: sequenceRef, style: defaultStyle, className: other.className, children: frozenContent })) }));
+    return (jsx_runtime_1.jsx(SequenceContext_js_1.SequenceContext.Provider, { value: contextValue, children: frozenContent === null ? null : other.layout === 'none' ? (frozenContent) : (jsx_runtime_1.jsx(AbsoluteFillElement_js_1.AbsoluteFillElement, { ref: sequenceRef, style: defaultStyle, className: other.className, children: frozenContent })) }));
 };
 const RegularSequence = (0, react_1.forwardRef)(RegularSequenceRefForwardingFunction);
 const PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {

package/dist/cjs/animated-image/AnimatedImage.d.ts

@@ -67,6 +67,47 @@ export declare const animatedImageSchema: {
         readonly default: undefined;
         readonly description: "Border color";
     };
+    readonly 'style.borderRadius': {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly description: "Border radius";
+        readonly hiddenFromList: false;
+        readonly keyframable: true;
+    };
+    readonly 'style.borderTopLeftRadius': {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly description: "Top left radius";
+        readonly hiddenFromList: false;
+    };
+    readonly 'style.borderTopRightRadius': {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly description: "Top right radius";
+        readonly hiddenFromList: false;
+    };
+    readonly 'style.borderBottomRightRadius': {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly description: "Bottom right radius";
+        readonly hiddenFromList: false;
+    };
+    readonly 'style.borderBottomLeftRadius': {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly description: "Bottom left radius";
+        readonly hiddenFromList: false;
+    };
     readonly 'style.backgroundColor': {
         readonly type: "color";
         readonly default: "transparent";

package/dist/cjs/animated-image/AnimatedImage.js

@@ -43,6 +43,7 @@ exports.animatedImageSchema = {
     ...interactivity_schema_js_1.transformSchema,
     ...interactivity_schema_js_1.backgroundSchema,
     ...interactivity_schema_js_1.borderSchema,
+    ...interactivity_schema_js_1.borderRadiusSchema,
 };
 const getCanvasPropsFromSequenceProps = (props) => {
     const canvasProps = {};

package/dist/cjs/audio/AudioForPreview.d.ts

@@ -7,7 +7,6 @@ type AudioForPreviewProps = RemotionAudioProps & {
     readonly _remotionInternalNativeLoopPassed: boolean;
     readonly _remotionInternalStack: string | null;
     readonly showInTimeline: boolean;
-    readonly stack?: string | undefined;
     readonly onNativeError: React.ReactEventHandler<HTMLAudioElement>;
 };
 export declare const AudioForPreview: React.ForwardRefExoticComponent<Omit<AudioForPreviewProps, "ref"> & React.RefAttributes<HTMLAudioElement>>;

package/dist/cjs/audio/AudioForPreview.js

@@ -58,7 +58,7 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         throw new Error('Cannot change the behavior for pre-mounting audio tags dynamically.');
     }
     const logLevel = (0, log_level_context_js_1.useLogLevel)();
-    const { volume, muted, playbackRate, preservePitch, shouldPreMountAudioTags, src, onDuration, acceptableTimeShiftInSeconds, _remotionInternalNeedsDurationCalculation, _remotionInternalNativeLoopPassed, _remotionInternalStack, allowAmplificationDuringRender, name, pauseWhenBuffering, showInTimeline, loopVolumeCurveBehavior, stack, crossOrigin, delayRenderRetries, delayRenderTimeoutInMilliseconds, toneFrequency, useWebAudioApi, onError, onNativeError, audioStreamIndex, ...nativeProps } = props;
+    const { volume, muted, playbackRate, preservePitch, shouldPreMountAudioTags, src, onDuration, acceptableTimeShiftInSeconds, _remotionInternalNeedsDurationCalculation, _remotionInternalNativeLoopPassed, _remotionInternalStack, allowAmplificationDuringRender, name, pauseWhenBuffering, showInTimeline, loopVolumeCurveBehavior, crossOrigin, delayRenderRetries, delayRenderTimeoutInMilliseconds, toneFrequency, useWebAudioApi, onError, onNativeError, audioStreamIndex, ...nativeProps } = props;
     // Typecheck that we are not accidentially passing unrecognized props
     // to the DOM
     const _propsValid = true;

package/dist/cjs/audio/html5-audio.d.ts

@@ -26,7 +26,7 @@ export declare const Html5Audio: React.ForwardRefExoticComponent<Omit<import("./
     /**
      * @deprecated For internal use only
      */
-    readonly stack?: string | undefined;
+    readonly _remotionInternalStack?: string | undefined;
 }, "ref"> & React.RefAttributes<HTMLAudioElement>>;
 /**
  * @deprecated This component has been renamed to `Html5Audio`.
@@ -54,5 +54,5 @@ export declare const Audio: React.ForwardRefExoticComponent<Omit<import("./props
     /**
      * @deprecated For internal use only
      */
-    readonly stack?: string | undefined;
+    readonly _remotionInternalStack?: string | undefined;
 }, "ref"> & React.RefAttributes<HTMLAudioElement>>;

package/dist/cjs/audio/html5-audio.js

@@ -24,7 +24,7 @@ const AudioRefForwardingFunction = (props, ref) => {
     var _a, _b, _c;
     const audioTagsContext = (0, react_1.useContext)(shared_audio_tags_js_1.SharedAudioTagsContext);
     const propsWithFreeze = props;
-    const { startFrom, endAt, trimBefore, trimAfter, name, stack, pauseWhenBuffering, showInTimeline, onError: onRemotionError, freeze, ...otherProps } = propsWithFreeze;
+    const { startFrom, endAt, trimBefore, trimAfter, name, _remotionInternalStack, pauseWhenBuffering, showInTimeline, onError: onRemotionError, freeze, ...otherProps } = propsWithFreeze;
     const { loop, freeze: _freeze, ...propsOtherThanLoop } = propsWithFreeze;
     const { fps } = (0, use_video_config_js_1.useVideoConfig)();
     const environment = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
@@ -94,7 +94,7 @@ const AudioRefForwardingFunction = (props, ref) => {
     if (environment.isRendering) {
         return (jsx_runtime_1.jsx(AudioForRendering_js_1.AudioForRendering, { onDuration: onDuration, ...props, ref: ref, onNativeError: onError, _remotionInternalNeedsDurationCalculation: Boolean(loop) }));
     }
-    return (jsx_runtime_1.jsx(AudioForPreview_js_1.AudioForPreview, { _remotionInternalNativeLoopPassed: (_c = props._remotionInternalNativeLoopPassed) !== null && _c !== void 0 ? _c : false, _remotionInternalStack: stack !== null && stack !== void 0 ? stack : null, shouldPreMountAudioTags: audioTagsContext !== null && audioTagsContext.numberOfAudioTags > 0, ...props, ref: ref, onNativeError: onError, onDuration: onDuration, pauseWhenBuffering: shouldPauseWhenBuffering, _remotionInternalNeedsDurationCalculation: Boolean(loop), showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true }));
+    return (jsx_runtime_1.jsx(AudioForPreview_js_1.AudioForPreview, { _remotionInternalNativeLoopPassed: (_c = props._remotionInternalNativeLoopPassed) !== null && _c !== void 0 ? _c : false, _remotionInternalStack: _remotionInternalStack !== null && _remotionInternalStack !== void 0 ? _remotionInternalStack : null, shouldPreMountAudioTags: audioTagsContext !== null && audioTagsContext.numberOfAudioTags > 0, ...props, ref: ref, onNativeError: onError, onDuration: onDuration, pauseWhenBuffering: shouldPauseWhenBuffering, _remotionInternalNeedsDurationCalculation: Boolean(loop), showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true }));
 };
 /**
  * @description With this component, you can add audio to your video. All audio formats which are supported by Chromium are supported by the component.

package/dist/cjs/canvas-image/CanvasImage.d.ts

@@ -67,6 +67,47 @@ export declare const canvasImageSchema: {
         readonly default: undefined;
         readonly description: "Border color";
     };
+    readonly 'style.borderRadius': {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly description: "Border radius";
+        readonly hiddenFromList: false;
+        readonly keyframable: true;
+    };
+    readonly 'style.borderTopLeftRadius': {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly description: "Top left radius";
+        readonly hiddenFromList: false;
+    };
+    readonly 'style.borderTopRightRadius': {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly description: "Top right radius";
+        readonly hiddenFromList: false;
+    };
+    readonly 'style.borderBottomRightRadius': {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly description: "Bottom right radius";
+        readonly hiddenFromList: false;
+    };
+    readonly 'style.borderBottomLeftRadius': {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly description: "Bottom left radius";
+        readonly hiddenFromList: false;
+    };
     readonly 'style.backgroundColor': {
         readonly type: "color";
         readonly default: "transparent";
@@ -169,9 +210,7 @@ export declare const canvasImageSchema: {
         };
     };
 };
-export declare const CanvasImage: import("react").ComponentType<import("../Interactive.js").InteractiveBaseProps & import("../Interactive.js").InteractiveCropProps & import("../Interactive.js").InteractivePremountProps & {
-    readonly stack?: string | undefined;
-} & CanvasImageCanvasProps & {
+export declare const CanvasImage: import("react").ComponentType<import("../Interactive.js").InteractiveBaseProps & import("../Interactive.js").InteractiveCropProps & import("../Interactive.js").InteractivePremountProps & CanvasImageCanvasProps & {
     readonly src: string;
     readonly width?: number | undefined;
     readonly height?: number | undefined;

package/dist/cjs/canvas-image/CanvasImage.js

@@ -36,6 +36,7 @@ exports.canvasImageSchema = {
     ...interactivity_schema_js_1.transformSchema,
     ...interactivity_schema_js_1.backgroundSchema,
     ...interactivity_schema_js_1.borderSchema,
+    ...interactivity_schema_js_1.borderRadiusSchema,
 };
 const makeAbortError = () => {
     if (typeof DOMException !== 'undefined') {
@@ -321,7 +322,7 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
     return (jsx_runtime_1.jsx("canvas", { ...canvasProps, ref: canvasRef, width: width, height: height, className: className, style: style, id: id }));
 });
 CanvasImageContent.displayName = 'CanvasImageContent';
-const CanvasImageInner = (0, react_1.forwardRef)(({ src, width, height, fit, effects = [], className, style, id, onError, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, durationInFrames, from, trimBefore, freeze, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, hidden, name, showInTimeline, cropLeft, cropRight, cropTop, cropBottom, stack, controls, _remotionInternalDocumentationLink, _remotionInternalCropComponentName, outlineRef, ...canvasProps }, ref) => {
+const CanvasImageInner = (0, react_1.forwardRef)(({ src, width, height, fit, effects = [], className, style, id, onError, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, durationInFrames, from, trimBefore, freeze, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, hidden, name, showInTimeline, cropLeft, cropRight, cropTop, cropBottom, controls, _remotionInternalDocumentationLink, _remotionInternalCropComponentName, outlineRef, ...canvasProps }, ref) => {
     if (!src) {
         throw new Error('No "src" prop was passed to <CanvasImage>.');
     }
@@ -348,7 +349,7 @@ const CanvasImageInner = (0, react_1.forwardRef)(({ src, width, height, fit, eff
         style: premountingStyle,
         componentName: _remotionInternalCropComponentName !== null && _remotionInternalCropComponentName !== void 0 ? _remotionInternalCropComponentName : '<CanvasImage />',
     });
-    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, trimBefore: trimBefore, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, name: name !== null && name !== void 0 ? name : '<CanvasImage>', _remotionInternalDocumentationLink: _remotionInternalDocumentationLink !== null && _remotionInternalDocumentationLink !== void 0 ? _remotionInternalDocumentationLink : 'https://www.remotion.dev/docs/canvasimage', controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalIsMedia: { type: 'image', src }, _remotionInternalStack: stack, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, outlineRef: outlineRef !== null && outlineRef !== void 0 ? outlineRef : actualRef, children: jsx_runtime_1.jsx(CanvasImageContent, { ref: actualRef, src: src, width: width, height: height, fit: fit, effects: effects, controls: controls, className: className, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, id: id, onError: onError, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, refForOutline: outlineRef !== null && outlineRef !== void 0 ? outlineRef : null, ...canvasProps }) }) }));
+    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, trimBefore: trimBefore, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, name: name !== null && name !== void 0 ? name : '<CanvasImage>', _remotionInternalDocumentationLink: _remotionInternalDocumentationLink !== null && _remotionInternalDocumentationLink !== void 0 ? _remotionInternalDocumentationLink : 'https://www.remotion.dev/docs/canvasimage', controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalIsMedia: { type: 'image', src }, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, outlineRef: outlineRef !== null && outlineRef !== void 0 ? outlineRef : actualRef, children: jsx_runtime_1.jsx(CanvasImageContent, { ref: actualRef, src: src, width: width, height: height, fit: fit, effects: effects, controls: controls, className: className, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, id: id, onError: onError, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, refForOutline: outlineRef !== null && outlineRef !== void 0 ? outlineRef : null, ...canvasProps }) }) }));
 });
 /*
  * @description Renders a static image to a `<canvas>` and applies Remotion effects.

package/dist/cjs/canvas-image/props.d.ts

@@ -2,12 +2,7 @@ import type React from 'react';
 import type { ImageFit } from '../calculate-image-fit.js';
 import type { EffectsProp } from '../effects/effect-types.js';
 import type { InteractiveBaseProps, InteractiveCropProps, InteractivePremountProps } from '../Interactive.js';
-type CanvasImageSequenceProps = InteractiveBaseProps & InteractiveCropProps & InteractivePremountProps & {
-    /**
-     * @deprecated For internal use only.
-     */
-    readonly stack?: string;
-};
+type CanvasImageSequenceProps = InteractiveBaseProps & InteractiveCropProps & InteractivePremountProps;
 export type CanvasImageCanvasProps = Omit<React.CanvasHTMLAttributes<HTMLCanvasElement>, 'children' | 'height' | 'onError' | 'width'>;
 export type CanvasImageProps = CanvasImageSequenceProps & CanvasImageCanvasProps & {
     readonly src: string;

package/dist/cjs/effects/Solid.d.ts

@@ -79,6 +79,47 @@ export declare const solidSchema: {
         readonly default: undefined;
         readonly description: "Border color";
     };
+    readonly 'style.borderRadius': {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly description: "Border radius";
+        readonly hiddenFromList: false;
+        readonly keyframable: true;
+    };
+    readonly 'style.borderTopLeftRadius': {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly description: "Top left radius";
+        readonly hiddenFromList: false;
+    };
+    readonly 'style.borderTopRightRadius': {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly description: "Top right radius";
+        readonly hiddenFromList: false;
+    };
+    readonly 'style.borderBottomRightRadius': {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly description: "Bottom right radius";
+        readonly hiddenFromList: false;
+    };
+    readonly 'style.borderBottomLeftRadius': {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly step: 1;
+        readonly description: "Bottom left radius";
+        readonly hiddenFromList: false;
+    };
     readonly 'style.backgroundColor': {
         readonly type: "color";
         readonly default: "transparent";

package/dist/cjs/effects/Solid.js

@@ -58,6 +58,7 @@ exports.solidSchema = {
     ...interactivity_schema_js_1.transformSchema,
     ...interactivity_schema_js_1.backgroundSchema,
     ...interactivity_schema_js_1.borderSchema,
+    ...interactivity_schema_js_1.borderRadiusSchema,
     ...interactivity_schema_js_1.cropSchema,
 };
 const SolidInner = ({ color, width, height, effects = [], className, style, pixelDensity, overrideId, reference, }) => {

package/dist/cjs/enable-sequence-stack-traces.d.ts

@@ -1,6 +1,10 @@
 import React from 'react';
+import type { SequenceControls } from './CompositionManager.js';
+export declare const REMOTION_INTERNAL_STACK_PROP = "_remotionInternalStack";
 export declare const getComponentsToAddStacksTo: () => unknown[];
 export declare const addSequenceStackTraces: (component: unknown) => void;
 export declare const setSequenceComponent: (component: unknown) => void;
 export declare const getSequenceComponent: () => unknown;
+export declare const setStackForControls: (controls: SequenceControls, stack: string | undefined) => void;
+export declare const getStackForControls: (controls: SequenceControls) => string | null;
 export declare const getSingleChildComponent: (children: React.ReactNode) => unknown;

package/dist/cjs/enable-sequence-stack-traces.js

@@ -3,10 +3,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getSingleChildComponent = exports.getSequenceComponent = exports.setSequenceComponent = exports.addSequenceStackTraces = exports.getComponentsToAddStacksTo = void 0;
+exports.getSingleChildComponent = exports.getStackForControls = exports.setStackForControls = exports.getSequenceComponent = exports.setSequenceComponent = exports.addSequenceStackTraces = exports.getComponentsToAddStacksTo = exports.REMOTION_INTERNAL_STACK_PROP = void 0;
 const react_1 = __importDefault(require("react"));
 const componentsToAddStacksTo = [];
 let sequenceComponent = null;
+const stacksByControls = new WeakMap();
+exports.REMOTION_INTERNAL_STACK_PROP = '_remotionInternalStack';
 const getComponentsToAddStacksTo = () => componentsToAddStacksTo;
 exports.getComponentsToAddStacksTo = getComponentsToAddStacksTo;
 const addSequenceStackTraces = (component) => {
@@ -19,6 +21,19 @@ const setSequenceComponent = (component) => {
 exports.setSequenceComponent = setSequenceComponent;
 const getSequenceComponent = () => sequenceComponent;
 exports.getSequenceComponent = getSequenceComponent;
+const setStackForControls = (controls, stack) => {
+    if (stack === undefined) {
+        stacksByControls.delete(controls);
+        return;
+    }
+    stacksByControls.set(controls, stack);
+};
+exports.setStackForControls = setStackForControls;
+const getStackForControls = (controls) => {
+    var _a;
+    return (_a = stacksByControls.get(controls)) !== null && _a !== void 0 ? _a : null;
+};
+exports.getStackForControls = getStackForControls;
 const getSingleChildComponent = (children) => {
     const mountedChildren = react_1.default.Children.toArray(children);
     if (mountedChildren.length !== 1) {

package/dist/cjs/index.d.ts

@@ -5,7 +5,7 @@ import type { AnyCompMetadata, AnyComposition, AudioOrVideoAsset, JsxComponentId
 import type { DelayRenderScope } from './delay-render.js';
 import { type TFolder } from './Folder.js';
 import type { StaticFile } from './get-static-files.js';
-import type { AssetFieldSchema, ArrayFieldSchema, ArrayItemFieldSchema, InteractivitySchemaField, InteractivitySchema } from './interactivity-schema.js';
+import type { AssetFieldSchema, ArrayFieldSchema, ArrayItemFieldSchema, CaptionsFieldSchema, InteractivitySchemaField, InteractivitySchema } from './interactivity-schema.js';
 import type { LogLevel } from './log.js';
 import type { ProResProfile } from './prores-profile.js';
 import type { PixelFormat, VideoImageFormat } from './render-types.js';
@@ -183,4 +183,4 @@ export type _InternalTypes = {
     TRenderAsset: TRenderAsset;
     ProResProfile: ProResProfile;
 };
-export type { AnyComposition, AssetFieldSchema, ArrayFieldSchema, ArrayItemFieldSchema, DelayRenderScope, JsxComponentIdentity, LoopDisplay, SequenceControls, InteractivitySchemaField, InteractivitySchema, UseBufferState, };
+export type { AnyComposition, AssetFieldSchema, ArrayFieldSchema, ArrayItemFieldSchema, CaptionsFieldSchema, DelayRenderScope, JsxComponentIdentity, LoopDisplay, SequenceControls, InteractivitySchemaField, InteractivitySchema, UseBufferState, };