remotion 4.0.535 → 4.0.536

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

@@ -51,7 +51,7 @@ const getCanvasPropsFromSequenceProps = (props) => {
     }
     return canvasProps;
 };
-const AnimatedImageContent = (0, react_2.forwardRef)(({ src, width, height, onError, loopBehavior = 'loop', playbackRate = 1, fit = 'fill', requestInit, effects, controls, ...props }, canvasRef) => {
+const AnimatedImageContent = (0, react_2.forwardRef)(({ src, width, height, onError, loopBehavior = 'loop', playbackRate = 1, fit = 'fill', requestInit, effects, effectsOutputSize, controls, ...props }, canvasRef) => {
     var _a, _b, _c;
     const resolvedSrc = (0, resolve_image_source_1.resolveAnimatedImageSource)(src);
     const [decodedImage, setDecodedImage] = (0, react_2.useState)(null);
@@ -196,11 +196,13 @@ const AnimatedImageContent = (0, react_2.forwardRef)(({ src, width, height, onEr
         width,
         height,
         cancelRender,
+        effectsOutputSize === null || effectsOutputSize === void 0 ? void 0 : effectsOutputSize.width,
+        effectsOutputSize === null || effectsOutputSize === void 0 ? void 0 : effectsOutputSize.height,
     ]);
-    return (jsx_runtime_1.jsx(canvas_1.Canvas, { ref: ref, width: width, height: height, fit: fit, effects: memoizedEffects, ...props }));
+    return (jsx_runtime_1.jsx(canvas_1.Canvas, { ref: ref, width: width, height: height, fit: fit, effects: memoizedEffects, effectsOutputSize: effectsOutputSize !== null && effectsOutputSize !== void 0 ? effectsOutputSize : null, ...props }));
 });
 AnimatedImageContent.displayName = 'AnimatedImageContent';
-const AnimatedImageInner = ({ src, width, height, onError, fit, playbackRate, loopBehavior, id, className, style, durationInFrames, from, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, cropLeft, cropRight, cropTop, cropBottom, requestInit, effects = [], controls, ref, ...sequenceProps }) => {
+const AnimatedImageInner = ({ src, width, height, onError, fit, playbackRate, loopBehavior, id, className, style, durationInFrames, from, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, cropLeft, cropRight, cropTop, cropBottom, requestInit, effects = [], effectsOutputSize, controls, ref, ...sequenceProps }) => {
     const actualRef = (0, react_2.useRef)(null);
     const memoizedEffectDefinitions = (0, use_memoized_effects_js_1.useMemoizedEffectDefinitions)(effects);
     (0, react_2.useImperativeHandle)(ref, () => {
@@ -242,7 +244,7 @@ const AnimatedImageInner = ({ src, width, height, onError, fit, playbackRate, lo
         requestInit,
         ...canvasProps,
     };
-    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, _remotionInternalIsPremounting: premountingActive, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, playbackRate: playbackRate, durationInFrames: durationInFrames, name: "<AnimatedImage>", _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/animatedimage", controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, ...sequenceProps, children: jsx_runtime_1.jsx(sequence_activity_context_js_1.SequenceContent, { children: jsx_runtime_1.jsx(AnimatedImageContent, { ...animatedImageProps, ref: actualRef, effects: effects, controls: controls }) }) }) }));
+    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, _remotionInternalIsPremounting: premountingActive, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, playbackRate: playbackRate, durationInFrames: durationInFrames, name: "<AnimatedImage>", _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/animatedimage", controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, ...sequenceProps, children: jsx_runtime_1.jsx(sequence_activity_context_js_1.SequenceContent, { children: jsx_runtime_1.jsx(AnimatedImageContent, { ...animatedImageProps, ref: actualRef, effects: effects, effectsOutputSize: effectsOutputSize !== null && effectsOutputSize !== void 0 ? effectsOutputSize : null, controls: controls }) }) }) }));
 };
 const AnimatedImageWithIntrinsicDuration = (props) => {
     const { fps } = (0, use_video_config_js_1.useVideoConfig)();

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { EffectDefinitionAndStack } from '../effects/effect-types.js';
+import type { EffectDefinitionAndStack, EffectsOutputSize } from '../effects/effect-types.js';
 export type AnimatedImageCanvasRef = {
     readonly draw: (imageData: VideoFrame) => Promise<boolean>;
     readonly getCanvas: () => HTMLCanvasElement | null;
@@ -12,4 +12,5 @@ export declare const Canvas: React.ForwardRefExoticComponent<{
     readonly className?: string | undefined;
     readonly style?: React.CSSProperties | undefined;
     readonly effects: EffectDefinitionAndStack<unknown>[];
+    readonly effectsOutputSize: EffectsOutputSize | null;
 } & React.AriaAttributes & Record<`data-${string}`, string | undefined> & React.RefAttributes<AnimatedImageCanvasRef>>;

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

@@ -39,9 +39,9 @@ const react_1 = __importStar(require("react"));
 const calculate_image_fit_js_1 = require("../calculate-image-fit.js");
 const run_effect_chain_js_1 = require("../effects/run-effect-chain.js");
 const use_effect_chain_state_js_1 = require("../effects/use-effect-chain-state.js");
-const CanvasRefForwardingFunction = ({ width, height, fit, className, style, effects, ...props }, ref) => {
+const CanvasRefForwardingFunction = ({ width, height, fit, className, style, effects, effectsOutputSize, ...props }, ref) => {
     const canvasRef = (0, react_1.useRef)(null);
-    const chainState = (0, use_effect_chain_state_js_1.useEffectChainState)();
+    const chainState = (0, use_effect_chain_state_js_1.useEffectChainState)(effectsOutputSize);
     const sourceCanvas = (0, react_1.useMemo)(() => {
         if (typeof document === 'undefined') {
             return null;

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

@@ -1,5 +1,5 @@
 import type { ImageFit } from '../calculate-image-fit.js';
-import type { EffectsProp } from '../effects/effect-types.js';
+import type { EffectsProp, EffectsOutputSize } from '../effects/effect-types.js';
 import type { InteractiveBaseProps, InteractiveCropProps, InteractivePremountProps } from '../Interactive.js';
 export type RemotionAnimatedImageLoopBehavior = 'loop' | 'pause-after-finish' | 'clear-after-finish';
 export type AnimatedImageCanvasProps = React.AriaAttributes & Record<`data-${string}`, string | undefined>;
@@ -18,5 +18,6 @@ export type RemotionAnimatedImageProps = {
 } & AnimatedImageCanvasProps;
 export type AnimatedImageProps = InteractiveBaseProps & InteractiveCropProps & InteractivePremountProps & RemotionAnimatedImageProps & {
     readonly effects?: EffectsProp;
+    readonly effectsOutputSize?: EffectsOutputSize;
 };
 export type AnimatedImageFillMode = ImageFit;

package/dist/cjs/asset-types.d.ts

@@ -31,6 +31,10 @@ declare module '*.jpeg' {
     const src: string;
     export default src;
 }
+declare module '*.jxl' {
+    const src: string;
+    export default src;
+}
 declare module '*.bmp' {
     const src: string;
     export default src;

package/dist/cjs/audio/shared-audio-tags.d.ts

@@ -62,7 +62,7 @@ type SharedAudioContextValue = {
     resumeAsAutoPlay: () => Promise<void>;
     suspend: () => Promise<void>;
     getIsResumingAudioContext: () => Promise<AudioContextResumeResult> | null;
-    unscheduleAudioNode: (node: AudioBufferSourceNode) => void;
+    unscheduleAudioNode: (node: AudioBufferSourceNode) => boolean;
     _experimentalKeepAudioContextAlive: boolean;
 };
 type SharedAudioTagsContextValue = {

package/dist/cjs/audio/shared-audio-tags.js

@@ -127,7 +127,7 @@ const SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled,
     const prevEndTimes = (0, react_1.useRef)({ scheduledEndTime: null, mediaEndTime: null });
     const nodesToResume = (0, react_1.useRef)(new Map());
     const unscheduleAudioNode = (0, react_1.useCallback)((node) => {
-        nodesToResume.current.delete(node);
+        return nodesToResume.current.delete(node);
     }, []);
     const scheduleAudioNode = (0, react_1.useMemo)(() => {
         return ({ node, mediaTimestamp, sourceOffset, scheduledTime, duration, offset, originalUnloopedMediaTimestamp, }) => {

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

@@ -1,4 +1,4 @@
-import type { EffectsProp } from '../effects/effect-types.js';
+import type { EffectsProp, EffectsOutputSize } from '../effects/effect-types.js';
 import type { CanvasImageCanvasProps } from './props.js';
 export declare const canvasImageSchema: {
     readonly 'style.transformOrigin': {
@@ -114,7 +114,7 @@ export declare const canvasImageSchema: {
     };
     readonly premountFor: {
         readonly type: "number";
-        readonly default: 0;
+        readonly default: undefined;
         readonly description: "Premount For";
         readonly min: 0;
         readonly step: 1;
@@ -223,6 +223,7 @@ export declare const CanvasImage: import("react").ComponentType<Omit<import("../
     readonly height?: number | undefined;
     readonly fit?: import("../calculate-image-fit.js").ImageFit | undefined;
     readonly effects?: EffectsProp | undefined;
+    readonly effectsOutputSize?: EffectsOutputSize | undefined;
     readonly className?: string | undefined;
     readonly style?: import("react").CSSProperties | undefined;
     readonly id?: string | undefined;

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

@@ -111,14 +111,14 @@ const waitForNextFrame = ({ onFrame, }) => {
     const frame = requestAnimationFrame(onFrame);
     return () => cancelAnimationFrame(frame);
 };
-const CanvasImageContent = (0, react_1.forwardRef)(({ src, crossOrigin, width, height, fit = 'fill', effects, controls, onError, className, style, id, pauseWhenLoading, maxRetries = 2, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...canvasProps }, ref) => {
+const CanvasImageContent = (0, react_1.forwardRef)(({ src, crossOrigin, width, height, fit = 'fill', effects, effectsOutputSize, controls, onError, className, style, id, pauseWhenLoading, maxRetries = 2, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...canvasProps }, ref) => {
     var _a, _b;
     const { delayRender, continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
     const { delayPlayback } = (0, use_buffer_state_js_1.useBufferState)();
     const [outputCanvas, setOutputCanvas] = (0, react_1.useState)(null);
     const [loadedImage, setLoadedImage] = (0, react_1.useState)(null);
     const actualSrc = (0, prefetch_js_1.usePreload)(src);
-    const chainState = (0, use_effect_chain_state_js_1.useEffectChainState)();
+    const chainState = (0, use_effect_chain_state_js_1.useEffectChainState)(effectsOutputSize);
     const memoizedEffects = (0, use_memoized_effects_js_1.useMemoizedEffects)({
         effects,
         overrideId: (_a = controls === null || controls === void 0 ? void 0 : controls.overrideId) !== null && _a !== void 0 ? _a : null,
@@ -330,7 +330,7 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, crossOrigin, width, h
     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, crossOrigin, width, height, fit, effects = [], className, style, id, onError, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, durationInFrames, from, trimBefore, loop, freeze, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, hidden, name, showInTimeline, cropLeft, cropRight, cropTop, cropBottom, controls, _remotionInternalDocumentationLink, _remotionInternalCropComponentName, ...canvasProps }, ref) => {
+const CanvasImageInner = (0, react_1.forwardRef)(({ src, crossOrigin, width, height, fit, effects = [], effectsOutputSize, className, style, id, onError, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, durationInFrames, from, trimBefore, loop, freeze, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, hidden, name, showInTimeline, cropLeft, cropRight, cropTop, cropBottom, controls, _remotionInternalDocumentationLink, _remotionInternalCropComponentName, ...canvasProps }, ref) => {
     if (!src) {
         throw new Error('No "src" prop was passed to <CanvasImage>.');
     }
@@ -365,7 +365,7 @@ const CanvasImageInner = (0, react_1.forwardRef)(({ src, crossOrigin, width, hei
         style: premountingStyle,
         componentName: _remotionInternalCropComponentName !== null && _remotionInternalCropComponentName !== void 0 ? _remotionInternalCropComponentName : '<CanvasImage />',
     });
-    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, _remotionInternalIsPremounting: premountingActive, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, trimBefore: trimBefore, loop: loop, durationInFrames: durationInFrames, 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: isMedia, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: jsx_runtime_1.jsx(sequence_activity_context_js_1.SequenceContent, { children: jsx_runtime_1.jsx(CanvasImageContent, { ref: actualRef, src: src, crossOrigin: crossOrigin, 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, ...canvasProps }) }) }) }));
+    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, _remotionInternalIsPremounting: premountingActive, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, trimBefore: trimBefore, loop: loop, durationInFrames: durationInFrames, 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: isMedia, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: jsx_runtime_1.jsx(sequence_activity_context_js_1.SequenceContent, { children: jsx_runtime_1.jsx(CanvasImageContent, { ref: actualRef, src: src, crossOrigin: crossOrigin, width: width, height: height, fit: fit, effects: effects, effectsOutputSize: effectsOutputSize !== null && effectsOutputSize !== void 0 ? effectsOutputSize : null, controls: controls, className: className, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, id: id, onError: onError, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, ...canvasProps }) }) }) }));
 });
 /*
  * @description Renders a static image to a `<canvas>` and applies Remotion effects.

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

@@ -1,6 +1,6 @@
 import type React from 'react';
 import type { ImageFit } from '../calculate-image-fit.js';
-import type { EffectsProp } from '../effects/effect-types.js';
+import type { EffectsProp, EffectsOutputSize } from '../effects/effect-types.js';
 import type { InteractiveBaseProps, InteractiveCropProps, InteractivePremountProps } from '../Interactive.js';
 type CanvasImageSequenceProps = Omit<InteractiveBaseProps, 'playbackRate'> & InteractiveCropProps & InteractivePremountProps;
 export type CanvasImageCanvasProps = Omit<React.CanvasHTMLAttributes<HTMLCanvasElement>, 'children' | 'height' | 'onError' | 'width'>;
@@ -11,6 +11,7 @@ export type CanvasImageProps = CanvasImageSequenceProps & CanvasImageCanvasProps
     readonly height?: number;
     readonly fit?: ImageFit;
     readonly effects?: EffectsProp;
+    readonly effectsOutputSize?: EffectsOutputSize;
     readonly className?: string;
     readonly style?: React.CSSProperties;
     readonly id?: string;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { InteractiveBaseProps, InteractivePremountProps, InteractiveCropProps } from '../Interactive.js';
-import type { EffectsProp } from './effect-types.js';
+import type { EffectsProp, EffectsOutputSize } from './effect-types.js';
 type MandatoryProps = {
     readonly width: number;
     readonly height: number;
@@ -8,6 +8,7 @@ type MandatoryProps = {
 type OptionalProps = {
     readonly color: string | undefined;
     readonly effects: EffectsProp;
+    readonly effectsOutputSize: EffectsOutputSize | null;
     readonly className: string | undefined;
     readonly style: React.CSSProperties | undefined;
     readonly pixelDensity: number | undefined;
@@ -127,7 +128,7 @@ export declare const solidSchema: {
     };
     readonly premountFor: {
         readonly type: "number";
-        readonly default: 0;
+        readonly default: undefined;
         readonly description: "Premount For";
         readonly min: 0;
         readonly step: 1;

package/dist/cjs/effects/Solid.js

@@ -66,7 +66,7 @@ exports.solidSchema = {
     ...interactivity_schema_js_1.borderRadiusSchema,
     ...interactivity_schema_js_1.cropSchema,
 };
-const SolidInner = ({ color, width, height, effects = [], className, style, pixelDensity, overrideId, videoConfigValues, reference, }) => {
+const SolidInner = ({ color, width, height, effects = [], effectsOutputSize = null, className, style, pixelDensity, overrideId, videoConfigValues, reference, }) => {
     const { delayRender, continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
     const resolvedPixelDensity = resolveSolidPixelDensity(pixelDensity);
     const canvasWidth = Math.ceil(width * resolvedPixelDensity);
@@ -86,7 +86,7 @@ const SolidInner = ({ color, width, height, effects = [], className, style, pixe
         canvas.height = 1;
         return canvas;
     }, []);
-    const chainState = (0, use_effect_chain_state_js_1.useEffectChainState)();
+    const chainState = (0, use_effect_chain_state_js_1.useEffectChainState)(effectsOutputSize);
     const canvasRef = (0, react_1.useCallback)((canvas) => {
         setOutputCanvas(canvas);
         if (typeof reference === 'function') {
@@ -158,7 +158,7 @@ const SolidInner = ({ color, width, height, effects = [], className, style, pixe
     }, [height, style, width]);
     return (jsx_runtime_1.jsx("canvas", { ref: canvasRef, width: canvasWidth, height: canvasHeight, className: className, style: canvasStyle }));
 };
-const SolidOuter = (0, react_1.forwardRef)(({ effects = [], controls, color, height, width, className, durationInFrames, style, name, from, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, trimBefore, playbackRate, loop, freeze, hidden, showInTimeline, pixelDensity, cropLeft, cropRight, cropTop, cropBottom, ...props }, ref) => {
+const SolidOuter = (0, react_1.forwardRef)(({ effects = [], effectsOutputSize = null, controls, color, height, width, className, durationInFrames, style, name, from, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, trimBefore, playbackRate, loop, freeze, hidden, showInTimeline, pixelDensity, cropLeft, cropRight, cropTop, cropBottom, ...props }, ref) => {
     var _a, _b;
     props;
     const memoizedEffectDefinitions = (0, use_memoized_effects_js_1.useMemoizedEffectDefinitions)(effects);
@@ -188,7 +188,7 @@ const SolidOuter = (0, react_1.forwardRef)(({ effects = [], controls, color, hei
         style: premountingStyle,
         componentName: '<Solid />',
     });
-    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, _remotionInternalIsPremounting: premountingActive, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from, trimBefore: trimBefore, playbackRate: playbackRate, loop: loop, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline, controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : '<Solid>', _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/solid", ...props, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: jsx_runtime_1.jsx(sequence_activity_context_js_1.SequenceContent, { children: jsx_runtime_1.jsx(SolidInner, { reference: actualRef, videoConfigValues: (_a = controls === null || controls === void 0 ? void 0 : controls.videoConfigValues) !== null && _a !== void 0 ? _a : null, overrideId: (_b = controls === null || controls === void 0 ? void 0 : controls.overrideId) !== null && _b !== void 0 ? _b : null, color: color, height: height, width: width, className: className, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, effects: effects, pixelDensity: pixelDensity }) }) }) }));
+    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, _remotionInternalIsPremounting: premountingActive, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from, trimBefore: trimBefore, playbackRate: playbackRate, loop: loop, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline, controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : '<Solid>', _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/solid", ...props, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: jsx_runtime_1.jsx(sequence_activity_context_js_1.SequenceContent, { children: jsx_runtime_1.jsx(SolidInner, { reference: actualRef, videoConfigValues: (_a = controls === null || controls === void 0 ? void 0 : controls.videoConfigValues) !== null && _a !== void 0 ? _a : null, overrideId: (_b = controls === null || controls === void 0 ? void 0 : controls.overrideId) !== null && _b !== void 0 ? _b : null, color: color, height: height, width: width, className: className, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, effects: effects, effectsOutputSize: effectsOutputSize, pixelDensity: pixelDensity }) }) }) }));
 });
 exports.Solid = (0, with_interactivity_schema_js_1.withInteractivitySchema)({
     Component: SolidOuter,

package/dist/cjs/effects/effect-types.d.ts

@@ -52,4 +52,8 @@ export type EffectFactory<P> = {} extends P ? (params?: P & {
 }) => EffectDescriptor<unknown> : (params: P & {
     readonly disabled?: boolean;
 }) => EffectDescriptor<unknown>;
+export type EffectsOutputSize = {
+    readonly width: number;
+    readonly height: number;
+};
 export {};

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

@@ -1,2 +1,2 @@
 export { createEffect } from './create-effect.js';
-export type { Backend, EffectApplyParams, EffectDefinitionAndStack, EffectDescriptor, EffectsProp, EffectDefinition, EffectFactory, } from './effect-types.js';
+export type { Backend, EffectApplyParams, EffectDefinitionAndStack, EffectDescriptor, EffectsProp, EffectsOutputSize, EffectDefinition, EffectFactory, } from './effect-types.js';

package/dist/cjs/effects/run-effect-chain.d.ts

@@ -1,6 +1,8 @@
 import { CanvasPool } from './canvas-pool.js';
 import type { EffectDefinition, EffectDefinitionAndStack } from './effect-types.js';
 export type EffectChainState = {
+    readonly width: number;
+    readonly height: number;
     pool: CanvasPool;
     setupCache: WeakMap<EffectDefinition<unknown, unknown>, WeakMap<HTMLCanvasElement, unknown>>;
     cleanupRegistry: Array<{
@@ -22,4 +24,4 @@ export type RunEffectChainOptions = {
     readonly width: number;
     readonly height: number;
 };
-export declare const runEffectChain: ({ state, source, effects, output, width, height, }: RunEffectChainOptions) => Promise<boolean>;
+export declare const runEffectChain: (options: RunEffectChainOptions) => Promise<boolean>;

package/dist/cjs/effects/run-effect-chain.js

@@ -6,6 +6,8 @@ const effect_internals_js_1 = require("./effect-internals.js");
 const gpu_device_js_1 = require("./gpu-device.js");
 const createEffectChainState = (width, height) => {
     const state = {
+        width,
+        height,
         pool: new canvas_pool_js_1.CanvasPool(width, height, (canvas) => {
             var _a;
             // The GL objects these setups hold died with the context and stay
@@ -62,9 +64,8 @@ const ensureSetup = (state, def, target) => {
 // Runs the effect pipeline imperatively. Returns `true` if the pipeline
 // completed and wrote to `output`, `false` if it was superseded by a newer
 // run (caller should not act on a stale result).
-const runEffectChain = async ({ state, source, effects, output, width, height, }) => {
+const runEffectChainWithoutResize = async ({ state, source, effects, output, width, height }, initialFlipSourceY, runId) => {
     var _a;
-    const runId = ++state.currentRunId;
     const isCancelled = () => state.currentRunId !== runId;
     // Bypass any effect with `disabled: true` before grouping by backend, so
     // disabled effects don't create empty runs or force unnecessary backend
@@ -102,66 +103,77 @@ const runEffectChain = async ({ state, source, effects, output, width, height, }
     // Canvas sources are DOM-oriented. Flip them when uploading into WebGL so
     // texture coordinates match clip-space output. `ImageBitmap` bridges below
     // opt out because they are already oriented for upload.
-    let flipWebGLSourceY = true;
-    for (let runIndex = 0; runIndex < runs.length; runIndex++) {
-        const run = runs[runIndex];
-        let canvasIndex = 0;
-        for (const eff of run.effects) {
-            const dst = state.pool.getCanvas(run.backend, canvasIndex);
-            const def = eff.definition;
-            if (run.backend === 'webgl2') {
-                // Checked before `setup()`: a lost context cannot compile shaders,
-                // and this surfaces the dedicated error instead of an effect's own.
-                state.pool.assertContextNotLost(dst);
-            }
-            const setupState = ensureSetup(state, def, dst);
-            def.apply({
-                source: currentImage,
-                target: dst,
-                state: setupState,
-                params: eff.params,
-                width,
-                height,
-                gpuDevice,
-                flipSourceY: run.backend === 'webgl2' ? flipWebGLSourceY : false,
-            });
-            if (run.backend === 'webgl2') {
-                // Same-backend ping-pong passes feed the previous WebGL canvas back
-                // through `texImage2D()`. That source is still a DOM canvas, so the
-                // next upload also needs to be flipped.
-                flipWebGLSourceY = true;
-            }
-            currentImage = dst;
-            canvasIndex = canvasIndex === 0 ? 1 : 0;
-        }
-        lastTarget = (_a = currentImage) !== null && _a !== void 0 ? _a : lastTarget;
-        const nextRun = runs[runIndex + 1];
-        if (nextRun && nextRun.backend !== run.backend && lastTarget) {
-            // 2D → WebGL: pass the 2D canvas directly so `texImage2D` + `UNPACK_FLIP_Y`
-            // matches blur-only on a raw frame canvas. `createImageBitmap` here changes
-            // upload orientation and produced upside-down stacks (wave + blur).
-            if (run.backend === '2d' && nextRun.backend === 'webgl2') {
-                currentImage = lastTarget;
-                flipWebGLSourceY = true;
+    let flipWebGLSourceY = initialFlipSourceY;
+    // Only bridge bitmaps are owned here; the original source belongs to the caller.
+    let bridgeBitmap = null;
+    try {
+        for (let runIndex = 0; runIndex < runs.length; runIndex++) {
+            const run = runs[runIndex];
+            let canvasIndex = 0;
+            for (const eff of run.effects) {
+                const dst = state.pool.getCanvas(run.backend, canvasIndex);
+                const def = eff.definition;
+                if (run.backend === 'webgl2') {
+                    // Checked before `setup()`: a lost context cannot compile shaders,
+                    // and this surfaces the dedicated error instead of an effect's own.
+                    state.pool.assertContextNotLost(dst);
+                }
+                const setupState = ensureSetup(state, def, dst);
+                def.apply({
+                    source: currentImage,
+                    target: dst,
+                    state: setupState,
+                    params: eff.params,
+                    width: state.width,
+                    height: state.height,
+                    gpuDevice,
+                    flipSourceY: run.backend === 'webgl2' ? flipWebGLSourceY : false,
+                });
+                // Effects consume their source synchronously. Release it before the
+                // next bridge so a run never retains multiple temporary bitmaps.
+                bridgeBitmap === null || bridgeBitmap === void 0 ? void 0 : bridgeBitmap.close();
+                bridgeBitmap = null;
+                if (run.backend === 'webgl2') {
+                    // Same-backend ping-pong passes feed the previous WebGL canvas back
+                    // through `texImage2D()`. That source is still a DOM canvas, so the
+                    // next upload also needs to be flipped.
+                    flipWebGLSourceY = true;
+                }
+                currentImage = dst;
+                canvasIndex = canvasIndex === 0 ? 1 : 0;
             }
-            else {
-                // Other bridges use `createImageBitmap` rather than passing the canvas
-                // straight through. A direct `drawImage(webglCanvas)` in the next
-                // backend's first effect forces an implicit GPU readback / finish on the
-                // consuming context, which empirically blows the per-frame vsync budget and
-                // halves the paint rate. `createImageBitmap` pipelines the GPU work.
-                const bitmap = await createImageBitmap(lastTarget);
-                if (isCancelled()) {
-                    bitmap.close();
-                    return false;
+            lastTarget = (_a = currentImage) !== null && _a !== void 0 ? _a : lastTarget;
+            const nextRun = runs[runIndex + 1];
+            if (nextRun && nextRun.backend !== run.backend && lastTarget) {
+                // 2D → WebGL: pass the 2D canvas directly so `texImage2D` + `UNPACK_FLIP_Y`
+                // matches blur-only on a raw frame canvas. `createImageBitmap` here changes
+                // upload orientation and produced upside-down stacks (wave + blur).
+                if (run.backend === '2d' && nextRun.backend === 'webgl2') {
+                    currentImage = lastTarget;
+                    flipWebGLSourceY = true;
                 }
-                currentImage = bitmap;
-                if (nextRun.backend === 'webgl2') {
-                    flipWebGLSourceY = false;
+                else {
+                    // Other bridges use `createImageBitmap` rather than passing the canvas
+                    // straight through. A direct `drawImage(webglCanvas)` in the next
+                    // backend's first effect forces an implicit GPU readback / finish on the
+                    // consuming context, which empirically blows the per-frame vsync budget and
+                    // halves the paint rate. `createImageBitmap` pipelines the GPU work.
+                    bridgeBitmap = await createImageBitmap(lastTarget);
+                    if (isCancelled()) {
+                        return false;
+                    }
+                    currentImage = bridgeBitmap;
+                    if (nextRun.backend === 'webgl2') {
+                        flipWebGLSourceY = false;
+                    }
                 }
             }
         }
     }
+    finally {
+        // Also release a bridge if setup/apply throws or the run is cancelled.
+        bridgeBitmap === null || bridgeBitmap === void 0 ? void 0 : bridgeBitmap.close();
+    }
     if (!lastTarget) {
         return true;
     }
@@ -173,4 +185,30 @@ const runEffectChain = async ({ state, source, effects, output, width, height, }
     outCtx.drawImage(lastTarget, 0, 0, width, height);
     return true;
 };
+// Keep ownership of the optional resized source until the existing chain settles.
+const runEffectChain = async (options) => {
+    const { state, source, width, height, effects } = options;
+    // Keep one ID across resizing and effect passes so callers can cancel the run.
+    const runId = ++state.currentRunId;
+    if ((state.width === width && state.height === height) ||
+        !effects.some((effect) => !effect.params.disabled)) {
+        return runEffectChainWithoutResize(options, true, runId);
+    }
+    const firstEnabledEffect = effects.find((effect) => !effect.params.disabled);
+    const resized = await createImageBitmap(source, {
+        resizeWidth: state.width,
+        resizeHeight: state.height,
+        // WebGL ignores UNPACK_FLIP_Y_WEBGL for ImageBitmap uploads.
+        imageOrientation: firstEnabledEffect.definition.backend === 'webgl2' ? 'flipY' : 'none',
+    });
+    try {
+        if (state.currentRunId !== runId) {
+            return false;
+        }
+        return await runEffectChainWithoutResize({ ...options, source: resized }, false, runId);
+    }
+    finally {
+        resized.close();
+    }
+};
 exports.runEffectChain = runEffectChain;

package/dist/cjs/effects/use-effect-chain-state.d.ts

@@ -1,4 +1,5 @@
+import type { EffectsOutputSize } from './effect-types.js';
 import type { EffectChainState } from './run-effect-chain.js';
-export declare const useEffectChainState: () => {
+export declare const useEffectChainState: (effectsOutputSize?: EffectsOutputSize | null) => {
     get: (width: number, height: number) => EffectChainState | null;
 };

package/dist/cjs/effects/use-effect-chain-state.js

@@ -2,8 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useEffectChainState = void 0;
 const react_1 = require("react");
+const validate_dimensions_js_1 = require("../validation/validate-dimensions.js");
 const run_effect_chain_js_1 = require("./run-effect-chain.js");
-const useEffectChainState = () => {
+const useEffectChainState = (effectsOutputSize = null) => {
+    const effectWidth = effectsOutputSize === null || effectsOutputSize === void 0 ? void 0 : effectsOutputSize.width;
+    const effectHeight = effectsOutputSize === null || effectsOutputSize === void 0 ? void 0 : effectsOutputSize.height;
+    if (effectsOutputSize) {
+        (0, validate_dimensions_js_1.validateDimension)(effectWidth, 'effectsOutputSize.width', 'on an effect-capable component');
+        (0, validate_dimensions_js_1.validateDimension)(effectHeight, 'effectsOutputSize.height', 'on an effect-capable component');
+    }
     const chainStateRef = (0, react_1.useRef)(null);
     const sizeRef = (0, react_1.useRef)(null);
     const unmountedRef = (0, react_1.useRef)(false);
@@ -22,6 +29,8 @@ const useEffectChainState = () => {
     }, []);
     return (0, react_1.useMemo)(() => ({
         get: (width, height) => {
+            width = effectWidth !== null && effectWidth !== void 0 ? effectWidth : width;
+            height = effectHeight !== null && effectHeight !== void 0 ? effectHeight : height;
             // Async work such as a late decoded video frame can still get here
             // after unmount. Nothing would release a pool created at this point.
             if (unmountedRef.current) {
@@ -38,6 +47,6 @@ const useEffectChainState = () => {
             }
             return chainStateRef.current;
         },
-    }), []);
+    }), [effectWidth, effectHeight]);
 };
 exports.useEffectChainState = useEffectChainState;

package/dist/cjs/index.d.ts

@@ -98,7 +98,7 @@ export type BundleEvaluationState = {
 export type BundleState = BundleIndexState | BundleEvaluationState | BundleCompositionState;
 export * from './AbsoluteFill.js';
 export * from './animated-image/index.js';
-export { createEffect, type Backend, type EffectApplyParams, type EffectDefinition, type EffectDefinitionAndStack, type EffectDescriptor, type EffectFactory, type EffectsProp, } from './effects/index.js';
+export { createEffect, type Backend, type EffectApplyParams, type EffectDefinition, type EffectDefinitionAndStack, type EffectDescriptor, type EffectFactory, type EffectsProp, type EffectsOutputSize, } from './effects/index.js';
 /**
  * @description Renders a solid-color rectangle on a `<canvas>`.
  * @see [Documentation](https://www.remotion.dev/docs/solid)

package/dist/cjs/interactivity-schema.d.ts

@@ -450,7 +450,7 @@ export declare const textContentSchema: {
 export declare const premountSchema: {
     readonly premountFor: {
         readonly type: "number";
-        readonly default: 0;
+        readonly default: undefined;
         readonly description: "Premount For";
         readonly min: 0;
         readonly step: 1;
@@ -469,7 +469,7 @@ export declare const premountSchema: {
 export declare const sequencePremountSchema: {
     readonly premountFor: {
         readonly type: "number";
-        readonly default: 0;
+        readonly default: undefined;
         readonly description: "Premount For";
         readonly min: 0;
         readonly step: 1;
@@ -683,7 +683,7 @@ export declare const sequenceStyleSchema: {
     };
     readonly premountFor: {
         readonly type: "number";
-        readonly default: 0;
+        readonly default: undefined;
         readonly description: "Premount For";
         readonly min: 0;
         readonly step: 1;
@@ -1040,7 +1040,7 @@ export declare const sequenceSchema: {
                 };
                 readonly premountFor: {
                     readonly type: "number";
-                    readonly default: 0;
+                    readonly default: undefined;
                     readonly description: "Premount For";
                     readonly min: 0;
                     readonly step: 1;
@@ -1286,7 +1286,7 @@ export declare const sequenceSchemaWithoutFrom: {
                 };
                 readonly premountFor: {
                     readonly type: "number";
-                    readonly default: 0;
+                    readonly default: undefined;
                     readonly description: "Premount For";
                     readonly min: 0;
                     readonly step: 1;

package/dist/cjs/interactivity-schema.js

@@ -245,7 +245,8 @@ exports.textContentSchema = exports.childrenSchema;
 exports.premountSchema = {
     premountFor: {
         type: 'number',
-        default: 0,
+        // Omission inherits the preview's default; zero explicitly disables it.
+        default: undefined,
         description: 'Premount For',
         min: 0,
         step: 1,