remotion 4.0.499 → 4.0.501

package/dist/cjs/HtmlInCanvas.js

@@ -9,6 +9,7 @@ const use_memoized_effects_js_1 = require("./effects/use-memoized-effects.js");
 const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
 const interactivity_schema_js_1 = require("./interactivity-schema.js");
 const Sequence_js_1 = require("./Sequence.js");
+const use_crop_style_js_1 = require("./use-crop-style.js");
 const use_delay_render_js_1 = require("./use-delay-render.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
 const with_interactivity_schema_js_1 = require("./with-interactivity-schema.js");
@@ -35,6 +36,17 @@ const isHtmlInCanvasSupported = () => {
 exports.isHtmlInCanvasSupported = isHtmlInCanvasSupported;
 /** Shown when {@link isHtmlInCanvasSupported} is false: APIs are absent (old Chrome and/or flag off). */
 exports.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE = 'HTML in Canvas is not supported. Two common causes: Chrome is older than version 148 (update Chrome), or the HTML-in-Canvas flag is disabled at chrome://flags/#canvas-draw-element (enable it and restart Chrome).';
+const MINIMUM_CHROME_VERSION_FOR_NESTED_HTML_IN_CANVAS = 152;
+const getChromeMajorVersion = () => {
+    if (typeof navigator === 'undefined') {
+        return null;
+    }
+    const match = navigator.userAgent.match(/\b(?:HeadlessChrome|Chrome)\/(\d+)/);
+    if (!match) {
+        return null;
+    }
+    return Number(match[1]);
+};
 function assertHtmlInCanvasDimensions(width, height) {
     if (typeof width !== 'number' || typeof height !== 'number') {
         throw new Error(`HtmlInCanvas: \`width\` and \`height\` must be numbers. Received width=${String(width)}, height=${String(height)}.`);
@@ -83,6 +95,12 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
     var _a;
     const ancestor = (0, react_1.useContext)(HtmlInCanvasAncestorContext);
     assertHtmlInCanvasDimensions(width, height);
+    const chromeMajorVersion = getChromeMajorVersion();
+    if (ancestor &&
+        chromeMajorVersion !== null &&
+        chromeMajorVersion < MINIMUM_CHROME_VERSION_FOR_NESTED_HTML_IN_CANVAS) {
+        throw new Error(`Nested <HtmlInCanvas> components require Chrome ${MINIMUM_CHROME_VERSION_FOR_NESTED_HTML_IN_CANVAS} or newer, but the current browser is Chrome ${chromeMajorVersion}. Upgrade Chrome or avoid nesting components that use <HtmlInCanvas>, such as shapes with effects.`);
+    }
     const resolvedPixelDensity = resolveHtmlInCanvasPixelDensity(pixelDensity);
     const canvasWidth = Math.ceil(width * resolvedPixelDensity);
     const canvasHeight = Math.ceil(height * resolvedPixelDensity);
@@ -355,7 +373,7 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
     return (jsx_runtime_1.jsx(HtmlInCanvasAncestorContext.Provider, { value: ancestorValue, children: jsx_runtime_1.jsx("canvas", { ref: setLayoutCanvasRef, width: canvasWidth, height: canvasHeight, style: canvasStyle, children: jsx_runtime_1.jsx("div", { ref: divRef, style: innerStyle, children: children }) }, canvasSizeKey) }));
 });
 HtmlInCanvasContent.displayName = 'HtmlInCanvasContent';
-const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, effects = [], children, onPaint, onInit, pixelDensity, controls, style, durationInFrames, name, ...sequenceProps }, ref) => {
+const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, effects = [], children, onPaint, onInit, pixelDensity, controls, style, cropLeft, cropRight, cropTop, cropBottom, durationInFrames, name, ...sequenceProps }, ref) => {
     const memoizedEffectDefinitions = (0, use_memoized_effects_js_1.useMemoizedEffectDefinitions)(effects);
     const actualRef = (0, react_1.useRef)(null);
     const setCanvasRef = (0, react_1.useCallback)((node) => {
@@ -367,7 +385,15 @@ const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, effects = []
             ref.current = node;
         }
     }, [ref]);
-    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : '<HtmlInCanvas>', _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/remotion/html-in-canvas", controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, outlineRef: actualRef, layout: "none", ...sequenceProps, children: jsx_runtime_1.jsx(HtmlInCanvasContent, { ref: setCanvasRef, width: width, height: height, effects: effects, onPaint: onPaint, onInit: onInit, pixelDensity: pixelDensity, controls: controls, style: style, children: children }) }));
+    const croppedStyle = (0, use_crop_style_js_1.useCropStyle)({
+        cropLeft,
+        cropRight,
+        cropTop,
+        cropBottom,
+        style: style !== null && style !== void 0 ? style : null,
+        componentName: '<HtmlInCanvas />',
+    });
+    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : '<HtmlInCanvas>', _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/remotion/html-in-canvas", controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, outlineRef: actualRef, layout: "none", ...sequenceProps, children: jsx_runtime_1.jsx(HtmlInCanvasContent, { ref: setCanvasRef, width: width, height: height, effects: effects, onPaint: onPaint, onInit: onInit, pixelDensity: pixelDensity, controls: controls, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, children: children }) }));
 });
 HtmlInCanvasInner.displayName = 'HtmlInCanvas';
 exports.htmlInCanvasSchema = {
@@ -384,6 +410,8 @@ exports.htmlInCanvasSchema = {
     ...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 HtmlInCanvasWrapped = (0, with_interactivity_schema_js_1.withInteractivitySchema)({
     Component: HtmlInCanvasInner,

package/dist/cjs/Img.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { EffectsProp } from './effects/effect-types.js';
-import type { InteractiveBaseProps, InteractivePremountProps } from './Interactive.js';
+import type { InteractiveBaseProps, InteractiveCropProps, InteractivePremountProps } from './Interactive.js';
 type NativeImgProps = Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, 'src'>;
 export type ImgProps = NativeImgProps & {
     readonly maxRetries?: number;
@@ -12,11 +12,7 @@ export type ImgProps = NativeImgProps & {
     readonly effects?: EffectsProp;
     readonly showInTimeline?: boolean;
     readonly name?: string;
-    /**
-     * @deprecated For internal use only
-     */
-    readonly stack?: string;
-} & InteractiveBaseProps & InteractivePremountProps;
+} & InteractiveBaseProps & InteractiveCropProps & InteractivePremountProps;
 export declare const imgSchema: {
     readonly 'style.transformOrigin': {
         readonly type: "transform-origin";
@@ -83,6 +79,47 @@ export declare const imgSchema: {
         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";
@@ -105,6 +142,46 @@ export declare const imgSchema: {
         readonly hiddenFromList: true;
         readonly keyframable: false;
     };
+    readonly cropLeft: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly description: "Crop left";
+        readonly min: 0;
+        readonly max: 1;
+        readonly step: 0.01;
+        readonly hiddenFromList: false;
+        readonly keyframable: true;
+    };
+    readonly cropRight: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly description: "Crop right";
+        readonly min: 0;
+        readonly max: 1;
+        readonly step: 0.01;
+        readonly hiddenFromList: false;
+        readonly keyframable: true;
+    };
+    readonly cropTop: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly description: "Crop top";
+        readonly min: 0;
+        readonly max: 1;
+        readonly step: 0.01;
+        readonly hiddenFromList: false;
+        readonly keyframable: true;
+    };
+    readonly cropBottom: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly description: "Crop bottom";
+        readonly min: 0;
+        readonly max: 1;
+        readonly step: 0.01;
+        readonly hiddenFromList: false;
+        readonly keyframable: true;
+    };
     readonly durationInFrames: {
         readonly type: "number";
         readonly default: undefined;
@@ -151,9 +228,5 @@ export declare const Img: React.ComponentType<NativeImgProps & {
     readonly effects?: EffectsProp | undefined;
     readonly showInTimeline?: boolean | undefined;
     readonly name?: string | undefined;
-    /**
-     * @deprecated For internal use only
-     */
-    readonly stack?: string | undefined;
-} & InteractiveBaseProps & InteractivePremountProps>;
+} & InteractiveBaseProps & InteractiveCropProps & InteractivePremountProps>;
 export {};

package/dist/cjs/Img.js

@@ -13,6 +13,7 @@ const Sequence_js_1 = require("./Sequence.js");
 const SequenceContext_js_1 = require("./SequenceContext.js");
 const truncate_src_for_label_js_1 = require("./truncate-src-for-label.js");
 const use_buffer_state_js_1 = require("./use-buffer-state.js");
+const use_crop_style_js_1 = require("./use-crop-style.js");
 const use_delay_render_js_1 = require("./use-delay-render.js");
 const use_premounting_js_1 = require("./use-premounting.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
@@ -195,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, 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>.');
     }
@@ -209,7 +210,15 @@ const NativeImgInner = ({ hidden, name, stack, showInTimeline, src, from, trimBe
         styleWhilePostmounted: styleWhilePostmounted !== null && styleWhilePostmounted !== void 0 ? styleWhilePostmounted : null,
         hideWhilePremounted: 'display-none',
     });
-    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: premountingStyle !== null && premountingStyle !== void 0 ? premountingStyle : undefined, ...props }) }) }));
+    const croppedStyle = (0, use_crop_style_js_1.useCropStyle)({
+        cropLeft,
+        cropRight,
+        cropTop,
+        cropBottom,
+        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, _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 = {
@@ -220,10 +229,12 @@ exports.imgSchema = {
         keyframable: false,
     },
     ...interactivity_schema_js_1.baseSchema,
+    ...interactivity_schema_js_1.cropSchema,
     ...interactivity_schema_js_1.premountSchema,
     ...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',
@@ -264,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, 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, 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>.');
@@ -284,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, 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", 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

@@ -8,13 +8,9 @@ type InteractiveTag = InteractiveHtmlTag | InteractiveSvgTag;
 type ElementForTag<Tag extends InteractiveTag> = Tag extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[Tag] : Tag extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[Tag] : Element;
 export type InteractiveBaseProps = Pick<SequenceProps, 'durationInFrames' | 'from' | 'trimBefore' | 'freeze' | 'hidden' | 'name' | 'showInTimeline'>;
 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}`;
@@ -53,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";
@@ -206,6 +210,126 @@ 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";
+            readonly default: 0;
+            readonly description: "Crop left";
+            readonly min: 0;
+            readonly max: 1;
+            readonly step: 0.01;
+            readonly hiddenFromList: false;
+            readonly keyframable: true;
+        };
+        readonly cropRight: {
+            readonly type: "number";
+            readonly default: 0;
+            readonly description: "Crop right";
+            readonly min: 0;
+            readonly max: 1;
+            readonly step: 0.01;
+            readonly hiddenFromList: false;
+            readonly keyframable: true;
+        };
+        readonly cropTop: {
+            readonly type: "number";
+            readonly default: 0;
+            readonly description: "Crop top";
+            readonly min: 0;
+            readonly max: 1;
+            readonly step: 0.01;
+            readonly hiddenFromList: false;
+            readonly keyframable: true;
+        };
+        readonly cropBottom: {
+            readonly type: "number";
+            readonly default: 0;
+            readonly description: "Crop bottom";
+            readonly min: 0;
+            readonly max: 1;
+            readonly step: 0.01;
+            readonly hiddenFromList: false;
+            readonly keyframable: true;
+        };
+    };
+    svgPaintSchema: {
+        readonly stroke: {
+            readonly type: "color";
+            readonly default: "none";
+            readonly description: "Stroke";
+        };
+        readonly strokeWidth: {
+            readonly type: "number";
+            readonly default: 1;
+            readonly description: "Stroke width";
+            readonly min: 0;
+            readonly step: 1;
+            readonly hiddenFromList: false;
+        };
+        readonly fill: {
+            readonly type: "color";
+            readonly default: undefined;
+            readonly description: "Fill";
+        };
+    };
+    svgStrokeSchema: {
+        readonly stroke: {
+            readonly type: "color";
+            readonly default: "none";
+            readonly description: "Stroke";
+        };
+        readonly strokeWidth: {
+            readonly type: "number";
+            readonly default: 1;
+            readonly description: "Stroke width";
+            readonly min: 0;
+            readonly step: 1;
+            readonly hiddenFromList: false;
+        };
+    };
     premountSchema: {
         readonly premountFor: {
             readonly type: "number";
@@ -326,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";
@@ -348,6 +513,46 @@ export declare const Interactive: {
                         readonly hiddenFromList: true;
                         readonly keyframable: false;
                     };
+                    readonly cropLeft: {
+                        readonly type: "number";
+                        readonly default: 0;
+                        readonly description: "Crop left";
+                        readonly min: 0;
+                        readonly max: 1;
+                        readonly step: 0.01;
+                        readonly hiddenFromList: false;
+                        readonly keyframable: true;
+                    };
+                    readonly cropRight: {
+                        readonly type: "number";
+                        readonly default: 0;
+                        readonly description: "Crop right";
+                        readonly min: 0;
+                        readonly max: 1;
+                        readonly step: 0.01;
+                        readonly hiddenFromList: false;
+                        readonly keyframable: true;
+                    };
+                    readonly cropTop: {
+                        readonly type: "number";
+                        readonly default: 0;
+                        readonly description: "Crop top";
+                        readonly min: 0;
+                        readonly max: 1;
+                        readonly step: 0.01;
+                        readonly hiddenFromList: false;
+                        readonly keyframable: true;
+                    };
+                    readonly cropBottom: {
+                        readonly type: "number";
+                        readonly default: 0;
+                        readonly description: "Crop bottom";
+                        readonly min: 0;
+                        readonly max: 1;
+                        readonly step: 0.01;
+                        readonly hiddenFromList: false;
+                        readonly keyframable: true;
+                    };
                 };
                 readonly none: {};
             };

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,
@@ -74,9 +75,22 @@ const interactiveTextElementSchema = {
 };
 const interactiveSvgTextElementSchema = {
     ...interactiveElementSchema,
+    ...interactivity_schema_js_1.svgPaintSchema,
     ...interactivity_schema_js_1.textSchema,
     ...interactivity_schema_js_1.textContentSchema,
 };
+const interactiveSvgElementSchema = {
+    ...interactiveElementSchema,
+    ...interactivity_schema_js_1.svgPaintSchema,
+};
+const interactiveSvgStrokeElementSchema = {
+    ...interactiveElementSchema,
+    ...interactivity_schema_js_1.svgStrokeSchema,
+};
+const interactiveSvgRootElementSchema = {
+    ...interactiveBorderElementSchema,
+    ...interactivity_schema_js_1.svgPaintSchema,
+};
 const setRef = (ref, value) => {
     if (typeof ref === 'function') {
         ref(value);
@@ -92,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,
             }) }));
@@ -120,18 +134,26 @@ const makeInteractiveElement = (tag, displayName, schema) => {
 const makeInteractiveTextElement = (tag, displayName) => {
     return makeInteractiveElement(tag, displayName, interactiveTextElementSchema);
 };
-const makeInteractiveNonTextElement = (tag, displayName) => {
-    return makeInteractiveElement(tag, displayName, interactiveElementSchema);
+const makeInteractiveSvgElement = (tag, displayName) => {
+    return makeInteractiveElement(tag, displayName, interactiveSvgElementSchema);
+};
+const makeInteractiveSvgStrokeElement = (tag, displayName) => {
+    return makeInteractiveElement(tag, displayName, interactiveSvgStrokeElementSchema);
 };
 /**
  * @description HTML and SVG elements that are registered in the Remotion Studio timeline and can be visually edited.
  */
 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,
     premountSchema: interactivity_schema_js_1.premountSchema,
     sequenceSchema: interactivity_schema_js_1.sequenceSchema,
     withSchema,
@@ -140,13 +162,13 @@ exports.Interactive = {
     Article: makeInteractiveTextElement('article', '<Interactive.Article>'),
     Aside: makeInteractiveTextElement('aside', '<Interactive.Aside>'),
     Button: makeInteractiveTextElement('button', '<Interactive.Button>'),
-    Circle: makeInteractiveNonTextElement('circle', '<Interactive.Circle>'),
+    Circle: makeInteractiveSvgElement('circle', '<Interactive.Circle>'),
     Code: makeInteractiveTextElement('code', '<Interactive.Code>'),
     Div: makeInteractiveTextElement('div', '<Interactive.Div>'),
-    Ellipse: makeInteractiveNonTextElement('ellipse', '<Interactive.Ellipse>'),
+    Ellipse: makeInteractiveSvgElement('ellipse', '<Interactive.Ellipse>'),
     Em: makeInteractiveTextElement('em', '<Interactive.Em>'),
     Footer: makeInteractiveTextElement('footer', '<Interactive.Footer>'),
-    G: makeInteractiveNonTextElement('g', '<Interactive.G>'),
+    G: makeInteractiveSvgElement('g', '<Interactive.G>'),
     H1: makeInteractiveTextElement('h1', '<Interactive.H1>'),
     H2: makeInteractiveTextElement('h2', '<Interactive.H2>'),
     H3: makeInteractiveTextElement('h3', '<Interactive.H3>'),
@@ -156,19 +178,19 @@ exports.Interactive = {
     Header: makeInteractiveTextElement('header', '<Interactive.Header>'),
     Label: makeInteractiveTextElement('label', '<Interactive.Label>'),
     Li: makeInteractiveTextElement('li', '<Interactive.Li>'),
-    Line: makeInteractiveNonTextElement('line', '<Interactive.Line>'),
+    Line: makeInteractiveSvgStrokeElement('line', '<Interactive.Line>'),
     Main: makeInteractiveTextElement('main', '<Interactive.Main>'),
     Nav: makeInteractiveTextElement('nav', '<Interactive.Nav>'),
     Ol: makeInteractiveTextElement('ol', '<Interactive.Ol>'),
     P: makeInteractiveTextElement('p', '<Interactive.P>'),
-    Path: makeInteractiveNonTextElement('path', '<Interactive.Path>'),
+    Path: makeInteractiveSvgElement('path', '<Interactive.Path>'),
     Pre: makeInteractiveTextElement('pre', '<Interactive.Pre>'),
-    Rect: makeInteractiveNonTextElement('rect', '<Interactive.Rect>'),
+    Rect: makeInteractiveSvgElement('rect', '<Interactive.Rect>'),
     Section: makeInteractiveTextElement('section', '<Interactive.Section>'),
     Small: makeInteractiveTextElement('small', '<Interactive.Small>'),
     Span: makeInteractiveTextElement('span', '<Interactive.Span>'),
     Strong: makeInteractiveTextElement('strong', '<Interactive.Strong>'),
-    Svg: makeInteractiveElement('svg', '<Interactive.Svg>', interactiveBorderElementSchema),
+    Svg: makeInteractiveElement('svg', '<Interactive.Svg>', interactiveSvgRootElementSchema),
     Text: makeInteractiveElement('text', '<Interactive.Text>', interactiveSvgTextElementSchema),
     Ul: makeInteractiveTextElement('ul', '<Interactive.Ul>'),
 };

package/dist/cjs/Sequence.d.ts

@@ -18,6 +18,10 @@ export type SequencePropsWithoutDuration = {
     readonly children?: React.ReactNode;
     readonly width?: number;
     readonly height?: number;
+    readonly cropLeft?: number;
+    readonly cropRight?: number;
+    readonly cropTop?: number;
+    readonly cropBottom?: number;
     readonly from?: number;
     readonly trimBefore?: number;
     readonly freeze?: number | null;