remotion 4.0.498 → 4.0.500

package/dist/cjs/CompositionManager.d.ts

@@ -72,7 +72,6 @@ export type TSequence = {
     displayName: string;
     documentationLink: string | null;
     parent: string | null;
-    rootId: string;
     showInTimeline: boolean;
     nonce: NonceHistory;
     loopDisplay: LoopDisplay | undefined;

package/dist/cjs/HtmlInCanvas.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { EffectsProp } from './effects/effect-types.js';
-import type { InteractiveBaseProps } from './Interactive.js';
+import type { InteractiveBaseProps, InteractiveCropProps } from './Interactive.js';
 import type { AbsoluteFillLayout } from './Sequence.js';
 declare global {
     interface ElementImage {
@@ -54,7 +54,7 @@ export type HtmlInCanvasOnPaint = (params: HtmlInCanvasOnPaintParams) => void |
 export type HtmlInCanvasOnInitCleanup = () => void;
 export type HtmlInCanvasOnInit = (params: HtmlInCanvasOnPaintParams) => HtmlInCanvasOnInitCleanup | Promise<HtmlInCanvasOnInitCleanup>;
 export type HtmlInCanvasPixelDensity = number;
-export type HtmlInCanvasProps = Omit<InteractiveBaseProps, 'children'> & Omit<AbsoluteFillLayout, 'layout' | 'styleWhilePostmounted' | 'postmountFor' | 'premountFor' | 'styleWhilePremounted'> & {
+export type HtmlInCanvasProps = Omit<InteractiveBaseProps, 'children'> & InteractiveCropProps & Omit<AbsoluteFillLayout, 'layout' | 'styleWhilePostmounted' | 'postmountFor' | 'premountFor' | 'styleWhilePremounted'> & {
     readonly durationInFrames?: number;
     readonly width: number;
     readonly height: number;
@@ -135,6 +135,46 @@ export declare const htmlInCanvasSchema: {
         readonly default: "transparent";
         readonly description: "Color";
     };
+    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;
@@ -174,7 +214,7 @@ export declare const htmlInCanvasSchema: {
         readonly hiddenFromList: false;
     };
 };
-export declare const HtmlInCanvas: React.ForwardRefExoticComponent<Omit<InteractiveBaseProps, "children"> & Omit<AbsoluteFillLayout, "layout" | "postmountFor" | "premountFor" | "styleWhilePostmounted" | "styleWhilePremounted"> & {
+export declare const HtmlInCanvas: React.ForwardRefExoticComponent<Omit<InteractiveBaseProps, "children"> & InteractiveCropProps & Omit<AbsoluteFillLayout, "layout" | "postmountFor" | "premountFor" | "styleWhilePostmounted" | "styleWhilePremounted"> & {
     readonly durationInFrames?: number | undefined;
     readonly width: number;
     readonly height: number;

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,7 @@ exports.htmlInCanvasSchema = {
     ...interactivity_schema_js_1.transformSchema,
     ...interactivity_schema_js_1.backgroundSchema,
     ...interactivity_schema_js_1.borderSchema,
+    ...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;
@@ -16,7 +16,7 @@ export type ImgProps = NativeImgProps & {
      * @deprecated For internal use only
      */
     readonly stack?: string;
-} & InteractiveBaseProps & InteractivePremountProps;
+} & InteractiveBaseProps & InteractiveCropProps & InteractivePremountProps;
 export declare const imgSchema: {
     readonly 'style.transformOrigin': {
         readonly type: "transform-origin";
@@ -105,6 +105,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;
@@ -155,5 +195,5 @@ export declare const Img: React.ComponentType<NativeImgProps & {
      * @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, stack, 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, _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 }) }) }));
 };
 const CanvasImageWithPrivateProps = index_js_1.CanvasImage;
 exports.imgSchema = {
@@ -220,6 +229,7 @@ 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,
@@ -264,12 +274,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, 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 }) => {
     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, 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 }));
     }
     if (!src) {
         throw new Error('No "src" prop was passed to <Img>.');
@@ -284,7 +294,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, stack: stack, _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,6 +8,7 @@ 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 & {
     /**
@@ -206,6 +207,83 @@ export declare const Interactive: {
             readonly description: "Border color";
         };
     };
+    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";
@@ -348,6 +426,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

@@ -74,9 +74,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);
@@ -120,8 +133,11 @@ 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.
@@ -132,6 +148,9 @@ exports.Interactive = {
     textSchema: interactivity_schema_js_1.textSchema,
     backgroundSchema: interactivity_schema_js_1.backgroundSchema,
     borderSchema: interactivity_schema_js_1.borderSchema,
+    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 +159,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 +175,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;

package/dist/cjs/Sequence.js

@@ -8,6 +8,7 @@ const AbsoluteFill_js_1 = require("./AbsoluteFill.js");
 const freeze_js_1 = require("./freeze.js");
 const interactivity_schema_js_1 = require("./interactivity-schema.js");
 const nonce_js_1 = require("./nonce.js");
+const sequence_crop_js_1 = require("./sequence-crop.js");
 const SequenceContext_js_1 = require("./SequenceContext.js");
 const SequenceManager_js_1 = require("./SequenceManager.js");
 const is_inside_series_js_1 = require("./series/is-inside-series.js");
@@ -18,12 +19,11 @@ const use_video_config_js_1 = require("./use-video-config.js");
 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, ...other }, ref) => {
+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;
     const { layout = 'absolute-fill' } = other;
     const [id] = (0, react_1.useState)(() => String(Math.random()));
     const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
-    const { rootId } = (0, timeline_position_state_js_1.useTimelineContext)();
     const cumulatedFrom = parentSequence
         ? parentSequence.cumulatedFrom + parentSequence.relativeFrom
         : 0;
@@ -31,6 +31,13 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
     if (layout !== 'absolute-fill' && layout !== 'none') {
         throw new TypeError(`The layout prop of <Sequence /> expects either "absolute-fill" or "none", but you passed: ${layout}`);
     }
+    const cropProps = { cropLeft, cropRight, cropTop, cropBottom };
+    const hasCropProp = Object.values(cropProps).some((value) => value !== undefined);
+    if (layout === 'none' && hasCropProp) {
+        throw new TypeError('The cropLeft, cropRight, cropTop and cropBottom props of <Sequence /> are only supported with layout="absolute-fill".');
+    }
+    (0, sequence_crop_js_1.validateSequenceCrop)(cropProps);
+    const { left: resolvedCropLeft, right: resolvedCropRight, top: resolvedCropTop, bottom: resolvedCropBottom, } = (0, sequence_crop_js_1.resolveSequenceCrop)(cropProps);
     // @ts-expect-error
     if (layout === 'none' && typeof other.style !== 'undefined') {
         throw new TypeError('If layout="none", you may not pass a style. Passed: ' +
@@ -202,7 +209,6 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
                     parent: (_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id) !== null && _a !== void 0 ? _a : null,
                     postmountDisplay: postmountDisplay !== null && postmountDisplay !== void 0 ? postmountDisplay : null,
                     premountDisplay: premountDisplay !== null && premountDisplay !== void 0 ? premountDisplay : null,
-                    rootId,
                     showInTimeline,
                     src: isMedia.src,
                     getStack: () => stackRef.current,
@@ -230,7 +236,6 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
                     playbackRate: isMedia.data.playbackRate,
                     postmountDisplay: postmountDisplay !== null && postmountDisplay !== void 0 ? postmountDisplay : null,
                     premountDisplay: premountDisplay !== null && premountDisplay !== void 0 ? premountDisplay : null,
-                    rootId,
                     showInTimeline,
                     src: isMedia.data.src,
                     getStack: () => stackRef.current,
@@ -257,7 +262,6 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
             documentationLink: resolvedDocumentationLink,
             parent: (_c = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id) !== null && _c !== void 0 ? _c : null,
             type: 'sequence',
-            rootId,
             showInTimeline,
             nonce: nonce.get(),
             loopDisplay,
@@ -283,7 +287,6 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
         unregisterSequence,
         parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id,
         actualDurationInFrames,
-        rootId,
         from,
         trimBefore,
         registeredTrimBefore,
@@ -315,6 +318,13 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
             : children;
     const frozenContent = content === null || typeof freeze === 'undefined' || freeze === null ? (content) : (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freeze, children: content }));
     const styleIfThere = other.layout === 'none' ? undefined : other.style;
+    const cropClipPath = (0, sequence_crop_js_1.getSequenceCropClipPath)({
+        left: resolvedCropLeft,
+        right: resolvedCropRight,
+        top: resolvedCropTop,
+        bottom: resolvedCropBottom,
+        borderRadius: styleIfThere === null || styleIfThere === void 0 ? void 0 : styleIfThere.borderRadius,
+    });
     const sequenceRef = (0, react_1.useCallback)((node) => {
         wrapperRefForOutline.current = node;
         if (typeof ref === 'function') {
@@ -330,8 +340,13 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
             ...(width ? { width } : {}),
             ...(height ? { height } : {}),
             ...(styleIfThere !== null && styleIfThere !== void 0 ? styleIfThere : {}),
+            ...(cropClipPath
+                ? {
+                    clipPath: cropClipPath,
+                }
+                : {}),
         };
-    }, [height, styleIfThere, width]);
+    }, [cropClipPath, height, styleIfThere, width]);
     if (ref !== null && layout === 'none') {
         throw new TypeError('It is not supported to pass both a `ref` and `layout="none"` to <Sequence />.');
     }

package/dist/cjs/TimelineContext.d.ts

@@ -4,7 +4,6 @@ import { type PlayableMediaTag } from './timeline-position-state';
 export type TimelineContextValue = {
     frame: Record<string, number>;
     playing: boolean;
-    rootId: string;
     imperativePlaying: RefObject<boolean>;
     audioAndVideoTags: RefObject<PlayableMediaTag[]>;
 };