remotion 4.0.535 → 4.0.537

package/dist/cjs/AbsoluteFill.d.ts

@@ -184,7 +184,7 @@ export declare const absoluteFillSchema: {
     readonly children: import("./interactivity-schema.js").InteractivitySchemaField;
     readonly premountFor: {
         readonly type: "number";
-        readonly default: 0;
+        readonly default: undefined;
         readonly description: "Premount For";
         readonly min: 0;
         readonly step: 1;

package/dist/cjs/CompositionManagerContext.d.ts

@@ -38,4 +38,7 @@ export type CompositionManagerContext = {
     canvasContent: CanvasContent | null;
 };
 export declare const CompositionManager: React.Context<CompositionManagerContext>;
+export declare const CompositionManagerRefContext: React.Context<{
+    readonly current: CompositionManagerContext;
+}>;
 export declare const CompositionSetters: React.Context<CompositionManagerSetters>;

package/dist/cjs/CompositionManagerContext.js

@@ -1,16 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CompositionSetters = exports.CompositionManager = exports.getAssetPreviewCompositionId = void 0;
+exports.CompositionSetters = exports.CompositionManagerRefContext = exports.CompositionManager = exports.getAssetPreviewCompositionId = void 0;
 const react_1 = require("react");
 const getAssetPreviewCompositionId = (asset) => `asset:${asset}`;
 exports.getAssetPreviewCompositionId = getAssetPreviewCompositionId;
-exports.CompositionManager = (0, react_1.createContext)({
+const defaultCompositionManagerContext = {
     compositions: [],
     folders: [],
     currentCompositionMetadata: null,
     currentAssetMetadata: null,
     canvasContent: null,
-});
+};
+exports.CompositionManager = (0, react_1.createContext)(defaultCompositionManagerContext);
+exports.CompositionManagerRefContext = (0, react_1.createContext)({ current: defaultCompositionManagerContext });
 exports.CompositionSetters = (0, react_1.createContext)({
     setCanvasContent: () => undefined,
     setCurrentAssetMetadata: () => undefined,

package/dist/cjs/CompositionManagerProvider.js

@@ -103,9 +103,11 @@ const CompositionManagerProvider = ({ children, onlyRenderComposition, currentCo
         currentAssetMetadata,
         canvasContent,
     ]);
+    const compositionManagerRef = (0, react_1.useRef)(compositionManagerContextValue);
+    compositionManagerRef.current = compositionManagerContextValue;
     if (registrationError !== null) {
         throw registrationError;
     }
-    return (jsx_runtime_1.jsx(CompositionRegistryProvider_js_1.CompositionRegistryProvider, { ref: flushSnapshotRef, onSnapshot: onCommitRegistrations, children: jsx_runtime_1.jsx(CompositionManagerContext_1.CompositionManager.Provider, { value: compositionManagerContextValue, children: jsx_runtime_1.jsx(CompositionManagerContext_1.CompositionSetters.Provider, { value: compositionManagerSetters, children: children }) }) }));
+    return (jsx_runtime_1.jsx(CompositionRegistryProvider_js_1.CompositionRegistryProvider, { ref: flushSnapshotRef, onSnapshot: onCommitRegistrations, children: jsx_runtime_1.jsx(CompositionManagerContext_1.CompositionManager.Provider, { value: compositionManagerContextValue, children: jsx_runtime_1.jsx(CompositionManagerContext_1.CompositionManagerRefContext.Provider, { value: compositionManagerRef, children: jsx_runtime_1.jsx(CompositionManagerContext_1.CompositionSetters.Provider, { value: compositionManagerSetters, children: children }) }) }) }));
 };
 exports.CompositionManagerProvider = CompositionManagerProvider;

package/dist/cjs/HtmlInCanvas.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { EffectsProp } from './effects/effect-types.js';
+import type { EffectsProp, EffectsOutputSize } from './effects/effect-types.js';
 import type { InteractiveBaseProps, InteractiveCropProps } from './Interactive.js';
 import type { AbsoluteFillLayout } from './Sequence.js';
 declare global {
@@ -85,6 +85,7 @@ export type HtmlInCanvasProps = Omit<InteractiveBaseProps, 'children'> & Interac
     readonly width: number;
     readonly height: number;
     readonly effects?: EffectsProp;
+    readonly effectsOutputSize?: EffectsOutputSize;
     readonly children: React.ReactNode;
     readonly onPaint?: HtmlInCanvasOnPaint;
     readonly onInit?: HtmlInCanvasOnInit;
@@ -205,7 +206,7 @@ export declare const htmlInCanvasSchema: {
     };
     readonly premountFor: {
         readonly type: "number";
-        readonly default: 0;
+        readonly default: undefined;
         readonly description: "Premount For";
         readonly min: 0;
         readonly step: 1;
@@ -313,6 +314,7 @@ export declare const HtmlInCanvas: React.ForwardRefExoticComponent<Omit<Interact
     readonly width: number;
     readonly height: number;
     readonly effects?: EffectsProp | undefined;
+    readonly effectsOutputSize?: EffectsOutputSize | undefined;
     readonly children: React.ReactNode;
     readonly onPaint?: HtmlInCanvasOnPaint | undefined;
     readonly onInit?: HtmlInCanvasOnInit | undefined;

package/dist/cjs/HtmlInCanvas.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.HtmlInCanvas = exports.htmlInCanvasSchema = exports.getHtmlInCanvasUnsupportedMessage = exports.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE = exports.isHtmlInCanvasNestingSupported = exports.isHtmlInCanvasSupported = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const DefaultPremountContext_js_1 = require("./DefaultPremountContext.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 use_memoized_effects_js_1 = require("./effects/use-memoized-effects.js");
@@ -146,7 +147,7 @@ const defaultOnPaint = ({ canvas, elementImage, }) => {
     ctx.drawElementImage(elementImage, 0, 0);
 };
 const HtmlInCanvasAncestorContext = (0, react_1.createContext)(null);
-const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, children, canvasSiblings, onPaint, onInit, pixelDensity, controls, style, renderFrame, }, ref) => {
+const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, effectsOutputSize, children, canvasSiblings, onPaint, onInit, pixelDensity, controls, style, renderFrame, }, ref) => {
     var _a, _b;
     const ancestorPaintState = (0, react_1.useContext)(HtmlInCanvasAncestorContext);
     assertHtmlInCanvasDimensions(width, height);
@@ -160,11 +161,15 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
     const { isClientSideRendering, isRendering } = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     const canRetryMissingPaintRecord = !isRendering || isClientSideRendering;
     const usesDirectLayoutCanvas = onPaint === undefined && onInit === undefined;
-    const paintTargetMode = usesDirectLayoutCanvas
-        ? 'direct'
-        : isRendering
-            ? 'copied'
-            : 'transferred';
+    // Keep a nested drawable canvas separate from the bitmap captured by its
+    // parent. Reusing it for both can crash Chromium during raster invalidation.
+    const paintTargetMode = ancestorPaintState
+        ? 'copied'
+        : usesDirectLayoutCanvas
+            ? 'direct'
+            : isRendering
+                ? 'copied'
+                : 'transferred';
     if (!(0, exports.isHtmlInCanvasSupported)()) {
         cancelRender(new Error((0, exports.getHtmlInCanvasUnsupportedMessage)()));
     }
@@ -221,7 +226,7 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
             ref.current = node;
         }
     }, [ref, paintTargetMode]);
-    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,
@@ -237,9 +242,11 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
     const initializedRef = (0, react_1.useRef)(false);
     const onInitCleanupRef = (0, react_1.useRef)(null);
     const unmountedRef = (0, react_1.useRef)(false);
+    const effectScratchCanvasesRef = (0, react_1.useRef)(null);
     const paintingTargets = (0, react_1.useRef)(new WeakMap());
     const onPaintCb = (0, react_1.useCallback)(async () => {
         var _a, _b;
+        var _c;
         if (isRendering && paintState.pendingChildren > 0) {
             return;
         }
@@ -351,6 +358,7 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
                 }
                 throw error;
             }
+            let effectSourceCanvas = null;
             try {
                 const currentOnPaint = onPaintRef.current;
                 if (currentOnPaint) {
@@ -367,6 +375,48 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
                         await paintResult;
                     }
                 }
+                else if (paintTarget instanceof HTMLCanvasElement &&
+                    effectsRef.current.some((effect) => !effect.params.disabled)) {
+                    // The element image can only be drawn into the visible layout
+                    // canvas, but effects finish asynchronously (e.g. while the
+                    // WebGPU device initializes). Move the unprocessed pixels to a
+                    // scratch canvas and restore the previous output within this task,
+                    // so the browser never presents the HTML without its effects.
+                    (_c = effectScratchCanvasesRef.current) !== null && _c !== void 0 ? _c : (effectScratchCanvasesRef.current = {
+                        source: document.createElement('canvas'),
+                        previousOutput: document.createElement('canvas'),
+                    });
+                    const { source: effectSource, previousOutput } = effectScratchCanvasesRef.current;
+                    resizePaintTarget({
+                        target: effectSource,
+                        width: canvasWidth,
+                        height: canvasHeight,
+                    });
+                    resizePaintTarget({
+                        target: previousOutput,
+                        width: canvasWidth,
+                        height: canvasHeight,
+                    });
+                    const effectSourceCtx = effectSource.getContext('2d');
+                    const previousOutputCtx = previousOutput.getContext('2d');
+                    const paintTargetCtx = paintTarget.getContext('2d');
+                    if (!effectSourceCtx || !previousOutputCtx || !paintTargetCtx) {
+                        throw new Error('Failed to acquire 2D context for <HtmlInCanvas> canvas');
+                    }
+                    previousOutputCtx.reset();
+                    previousOutputCtx.drawImage(paintTarget, 0, 0);
+                    defaultOnPaint({
+                        canvas: paintTarget,
+                        element,
+                        elementImage: elImage,
+                        pixelDensity: resolvedPixelDensity,
+                    });
+                    effectSourceCtx.reset();
+                    effectSourceCtx.drawImage(paintTarget, 0, 0);
+                    paintTargetCtx.reset();
+                    paintTargetCtx.drawImage(previousOutput, 0, 0);
+                    effectSourceCanvas = effectSource;
+                }
                 else {
                     defaultOnPaint({
                         canvas: paintTarget,
@@ -380,7 +430,7 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
                 if (state) {
                     await (0, run_effect_chain_js_1.runEffectChain)({
                         state,
-                        source: paintTarget,
+                        source: effectSourceCanvas !== null && effectSourceCanvas !== void 0 ? effectSourceCanvas : paintTarget,
                         effects: effectsRef.current,
                         output: paintTarget,
                         width: canvasWidth,
@@ -445,10 +495,11 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
             paintState.release = null;
         };
     }, [paintState]);
-    // Default paint handlers draw synchronously on the layout canvas itself.
-    // ElementImage can only be drawn into its associated canvas, so custom
-    // handlers retain a transferred target. Rendering copies it to a separate
-    // visible canvas without waiting for the transferred canvas to present.
+    // Non-nested default handlers paint directly on the layout canvas. Nested
+    // canvases and custom handlers retain a transferred target because an
+    // ElementImage can only be drawn into its associated canvas. Nested canvases
+    // and rendering copy it to a separate visible canvas without waiting for
+    // the transferred canvas to present.
     (0, react_1.useLayoutEffect)(() => {
         var _a;
         const placeholder = canvas2dRef.current;
@@ -539,7 +590,7 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
         };
     }, [height, style, width]);
     return (jsx_runtime_1.jsxs(HtmlInCanvasAncestorContext.Provider, { value: paintState, children: [
-            jsx_runtime_1.jsxs("canvas", { ref: paintTargetMode === 'copied' ? canvas2dRef : setVisibleCanvasRef, width: canvasWidth, height: canvasHeight, style: paintTargetMode === 'copied'
+            jsx_runtime_1.jsx("canvas", { ref: paintTargetMode === 'copied' ? canvas2dRef : setVisibleCanvasRef, width: canvasWidth, height: canvasHeight, style: paintTargetMode === 'copied'
                     ? {
                         ...canvasStyle,
                         position: 'absolute',
@@ -548,10 +599,10 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
                         visibility: 'hidden',
                         pointerEvents: 'none',
                     }
-                    : canvasStyle, children: [
-                    jsx_runtime_1.jsx("div", { ref: divRef, style: paintTargetMode === 'copied'
-                            ? { ...innerStyle, visibility: 'visible' }
-                            : innerStyle, children: children }), canvasSiblings] }, canvasSizeKey), paintTargetMode === 'copied' ? (jsx_runtime_1.jsx("canvas", { ref: setVisibleCanvasRef, width: canvasWidth, height: canvasHeight, style: canvasStyle }, `output-${canvasSizeKey}`)) : null] }));
+                    : canvasStyle, children: jsx_runtime_1.jsxs(DefaultPremountContext_js_1.DefaultPremountContext.Provider, { value: 0, children: [
+                        jsx_runtime_1.jsx("div", { ref: divRef, style: paintTargetMode === 'copied'
+                                ? { ...innerStyle, visibility: 'visible' }
+                                : innerStyle, children: children }), canvasSiblings] }) }, canvasSizeKey), paintTargetMode === 'copied' ? (jsx_runtime_1.jsx("canvas", { ref: setVisibleCanvasRef, width: canvasWidth, height: canvasHeight, style: canvasStyle }, `output-${canvasSizeKey}`)) : null] }));
 });
 HtmlInCanvasContent.displayName = 'HtmlInCanvasContent';
 // Subscribe to frame changes only while rendering. Preview keeps relying on
@@ -561,7 +612,7 @@ const HtmlInCanvasContentForRendering = (0, react_1.forwardRef)((props, ref) =>
     return jsx_runtime_1.jsx(HtmlInCanvasContent, { ...props, ref: ref, renderFrame: frame });
 });
 HtmlInCanvasContentForRendering.displayName = 'HtmlInCanvasContentForRendering';
-const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, effects = [], children, onPaint, onInit, pixelDensity, _remotionInternalCanvasSiblings, controls, style, cropLeft, cropRight, cropTop, cropBottom, durationInFrames, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, name, ...sequenceProps }, ref) => {
+const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, effects = [], effectsOutputSize, children, onPaint, onInit, pixelDensity, _remotionInternalCanvasSiblings, controls, style, cropLeft, cropRight, cropTop, cropBottom, durationInFrames, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, name, ...sequenceProps }, ref) => {
     var _a;
     const { isRendering } = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     const Content = isRendering
@@ -600,7 +651,7 @@ const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, effects = []
         style: premountingStyle,
         componentName: '<HtmlInCanvas />',
     });
-    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", durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : '<HtmlInCanvas>', _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/remotion/html-in-canvas", controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, ...sequenceProps, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: jsx_runtime_1.jsx(Content, { ref: setCanvasRef, renderFrame: null, width: width, height: height, effects: effects, onPaint: onPaint, onInit: onInit, pixelDensity: pixelDensity, canvasSiblings: _remotionInternalCanvasSiblings !== null && _remotionInternalCanvasSiblings !== void 0 ? _remotionInternalCanvasSiblings : null, controls: controls, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, children: children }) }) }));
+    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", durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : '<HtmlInCanvas>', _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/remotion/html-in-canvas", controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, ...sequenceProps, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: jsx_runtime_1.jsx(Content, { ref: setCanvasRef, renderFrame: null, width: width, height: height, effects: effects, effectsOutputSize: effectsOutputSize !== null && effectsOutputSize !== void 0 ? effectsOutputSize : null, onPaint: onPaint, onInit: onInit, pixelDensity: pixelDensity, canvasSiblings: _remotionInternalCanvasSiblings !== null && _remotionInternalCanvasSiblings !== void 0 ? _remotionInternalCanvasSiblings : null, controls: controls, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, children: children }) }) }));
 });
 HtmlInCanvasInner.displayName = 'HtmlInCanvas';
 exports.htmlInCanvasSchema = {

package/dist/cjs/Img.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-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 NativeImgProps = Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, 'src'>;
 export type ImgProps = NativeImgProps & {
@@ -11,6 +11,7 @@ export type ImgProps = NativeImgProps & {
     readonly onImageError?: (error: Error) => void;
     readonly src: string;
     readonly effects?: EffectsProp;
+    readonly effectsOutputSize?: EffectsOutputSize;
     readonly showInTimeline?: boolean;
     readonly name?: string;
 } & Omit<InteractiveBaseProps, 'playbackRate'> & InteractiveCropProps & InteractivePremountProps;
@@ -128,7 +129,7 @@ export declare const imgSchema: {
     };
     readonly premountFor: {
         readonly type: "number";
-        readonly default: 0;
+        readonly default: undefined;
         readonly description: "Premount For";
         readonly min: 0;
         readonly step: 1;
@@ -229,6 +230,7 @@ export declare const Img: React.ComponentType<NativeImgProps & {
     readonly onImageError?: ((error: Error) => void) | undefined;
     readonly src: string;
     readonly effects?: EffectsProp | undefined;
+    readonly effectsOutputSize?: EffectsOutputSize | undefined;
     readonly showInTimeline?: boolean | undefined;
     readonly name?: string | undefined;
 } & Omit<InteractiveBaseProps, "playbackRate"> & InteractiveCropProps & InteractivePremountProps>;

package/dist/cjs/Img.js

@@ -286,7 +286,7 @@ const getFitFromObjectFit = (style) => {
     }
     return undefined;
 };
-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, onImageError, ...props }) => {
+const ImgInner = ({ effects = [], effectsOutputSize, 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, onImageError, ...props }) => {
     var _a;
     const shouldPauseWhenLoading = (0, v5_flag_js_1.resolveV5Default)(pauseWhenLoading);
     if (effects.length === 0) {
@@ -305,7 +305,7 @@ const ImgInner = ({ effects = [], ref, hidden, name, showInTimeline, src, from,
     const canvasHeight = typeof height === 'number' ? height : undefined;
     const canvasProps = props;
     const canvasFit = (_a = getFitFromObjectFit(style)) !== null && _a !== void 0 ? _a : 'fill';
-    return (jsx_runtime_1.jsx(CanvasImageWithPrivateProps, { src: src, width: canvasWidth, height: canvasHeight, fit: canvasFit, effects: effects, className: className, style: style, cropLeft: cropLeft, cropRight: cropRight, cropTop: cropTop, cropBottom: cropBottom, id: id, onError: onImageError, 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, ...canvasProps }));
+    return (jsx_runtime_1.jsx(CanvasImageWithPrivateProps, { src: src, width: canvasWidth, height: canvasHeight, fit: canvasFit, effects: effects, effectsOutputSize: effectsOutputSize, className: className, style: style, cropLeft: cropLeft, cropRight: cropRight, cropTop: cropTop, cropBottom: cropBottom, id: id, onError: onImageError, 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, ...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

@@ -24,19 +24,25 @@ type StyleAcceptsCssProperties<Style> = true extends StyleMemberAcceptsCssProper
 type PropsBranchAcceptsStyle<Props> = Props extends unknown ? 'style' extends keyof Props ? StyleAcceptsCssProperties<Props[Extract<'style', keyof Props>]> : false : never;
 type EveryPropsBranchAcceptsStyle<Props> = [Props] extends [never] ? false : false extends PropsBranchAcceptsStyle<Props> ? false : true;
 type ComponentAcceptingStyle<Component extends React.ElementType, ReservedKey extends PropertyKey> = ComponentWithoutReservedProps<Component, ReservedKey> & (EveryPropsBranchAcceptsStyle<React.ComponentPropsWithoutRef<Component>> extends true ? unknown : never);
-type WithSchema = {
-    <S extends InteractivitySchema, Component extends React.ElementType>(options: Omit<WithInteractivitySchemaOptions<S, React.ComponentPropsWithoutRef<Component>>, 'Component' | 'supportsEffects'> & {
+type WithSchemaOptions<Options extends {
+    schema: InteractivitySchema;
+    componentName: string;
+}, WithDefaults extends boolean> = WithDefaults extends true ? Omit<Options, 'schema' | 'componentName' | 'wrapInSequence'> & Partial<Pick<Options, 'schema' | 'componentName'>> : Options;
+type WithSequence<WithDefaults extends boolean> = {
+    <S extends InteractivitySchema, Component extends React.ElementType>(options: WithSchemaOptions<Omit<WithInteractivitySchemaOptions<S, React.ComponentPropsWithoutRef<Component>>, 'Component' | 'supportsEffects'> & {
         readonly Component: ComponentWithoutReservedProps<Component, WithSchemaReservedKey | 'style' | 'width' | 'height'>;
         readonly wrapInSequence: true;
         readonly layout: 'absolute-fill';
-    }): React.FC<React.ComponentPropsWithoutRef<Component> & InteractiveBaseProps & InteractivePremountProps & InteractiveCropProps & InteractiveTransformProps & Pick<SequenceProps, 'width' | 'height'> & {
+    }, WithDefaults>): React.FC<React.ComponentPropsWithoutRef<Component> & InteractiveBaseProps & InteractivePremountProps & InteractiveCropProps & InteractiveTransformProps & Pick<SequenceProps, 'width' | 'height'> & {
         readonly ref?: React.Ref<HTMLDivElement>;
     }>;
-    <S extends InteractivitySchema, Component extends React.ElementType>(options: Omit<WithInteractivitySchemaOptions<S, React.ComponentPropsWithoutRef<Component>>, 'Component' | 'supportsEffects'> & {
+    <S extends InteractivitySchema, Component extends React.ElementType>(options: WithSchemaOptions<Omit<WithInteractivitySchemaOptions<S, React.ComponentPropsWithoutRef<Component>>, 'Component' | 'supportsEffects'> & {
         readonly Component: ComponentAcceptingStyle<Component, WithSchemaReservedKey>;
         readonly wrapInSequence: true;
         readonly layout?: 'none';
-    }): React.FC<React.ComponentPropsWithRef<Component> & InteractiveBaseProps & InteractivePremountProps & InteractiveCropProps>;
+    }, WithDefaults>): React.FC<React.ComponentPropsWithRef<Component> & InteractiveBaseProps & InteractivePremountProps & InteractiveCropProps>;
+};
+type WithSchema = WithSequence<false> & {
     <S extends InteractivitySchema, Props extends object>(options: WithInteractivitySchemaOptions<S, Props> & {
         readonly wrapInSequence?: false;
         readonly layout?: never;
@@ -370,7 +376,7 @@ export declare const Interactive: {
     premountSchema: {
         readonly premountFor: {
             readonly type: "number";
-            readonly default: 0;
+            readonly default: undefined;
             readonly description: "Premount For";
             readonly min: 0;
             readonly step: 1;
@@ -544,7 +550,7 @@ export declare const Interactive: {
                     };
                     readonly premountFor: {
                         readonly type: "number";
-                        readonly default: 0;
+                        readonly default: undefined;
                         readonly description: "Premount For";
                         readonly min: 0;
                         readonly step: 1;
@@ -604,7 +610,15 @@ export declare const Interactive: {
             };
         };
     };
+    /**
+     * @deprecated Use `Interactive.create()` instead: https://www.remotion.dev/docs/interactive-create
+     */
     withSchema: WithSchema;
+    /**
+     * @description Creates a component with timing props and editable Studio controls.
+     * @see [Documentation](https://www.remotion.dev/docs/interactive-create)
+     */
+    create: WithSequence<true>;
     _internalMakeRemotionComponentIdentity: ({ packageName, componentName, }: {
         readonly packageName: RemotionComponentIdentityPackage;
         readonly componentName: string;

package/dist/cjs/Interactive.js

@@ -164,7 +164,7 @@ const withSchema = (untypedOptions) => {
                         style: { overflow: 'hidden', ...croppedStyle },
                         ref: ref,
                     }
-                    : {}), durationInFrames: durationInFrames, from: from, trimBefore: trimBefore, playbackRate: playbackRate, loop: loop, freeze: freeze, hidden: hidden, name: name !== null && name !== void 0 ? name : componentName, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/interactive-with-schema", showInTimeline: isCurrentComposition ? false : showInTimeline, controls: controls, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: react_1.default.createElement(Component, {
+                    : {}), durationInFrames: durationInFrames, from: from, trimBefore: trimBefore, playbackRate: playbackRate, loop: loop, freeze: freeze, hidden: hidden, name: name !== null && name !== void 0 ? name : componentName, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/interactive-create", showInTimeline: isCurrentComposition ? false : showInTimeline, controls: controls, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: react_1.default.createElement(Component, {
                     ...componentPropsWithoutCropping,
                     ...(layout === 'none'
                         ? { style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, ref }
@@ -187,6 +187,19 @@ const withSchema = (untypedOptions) => {
     (0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(Wrapped);
     return Wrapped;
 };
+const create = (untypedOptions) => {
+    var _a;
+    var _b, _c;
+    const options = untypedOptions;
+    return withSchema({
+        ...options,
+        wrapInSequence: true,
+        schema: (_b = options.schema) !== null && _b !== void 0 ? _b : {},
+        componentName: (_c = options.componentName) !== null && _c !== void 0 ? _c : (options.Component.displayName ||
+            ((_a = options.Component.name) === null || _a === void 0 ? void 0 : _a.replace(/(.+)Inner$/, '$1')) ||
+            'Component'),
+    });
+};
 const makeInteractiveElement = (tag, displayName, schema) => {
     const Inner = (0, react_1.forwardRef)((propsWithControls, ref) => {
         const { durationInFrames, from, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, trimBefore, playbackRate, loop, freeze, hidden, name, showInTimeline, controls, cropLeft, cropRight, cropTop, cropBottom, style, ...props } = propsWithControls;
@@ -261,7 +274,15 @@ exports.Interactive = {
     svgStrokeSchema: interactivity_schema_js_1.svgStrokeSchema,
     premountSchema: interactivity_schema_js_1.premountSchema,
     sequenceSchema: interactivity_schema_js_1.sequenceSchema,
+    /**
+     * @deprecated Use `Interactive.create()` instead: https://www.remotion.dev/docs/interactive-create
+     */
     withSchema,
+    /**
+     * @description Creates a component with timing props and editable Studio controls.
+     * @see [Documentation](https://www.remotion.dev/docs/interactive-create)
+     */
+    create,
     _internalMakeRemotionComponentIdentity: makeRemotionComponentIdentity,
     A: makeInteractiveTextElement('a', '<Interactive.A>'),
     Article: makeInteractiveTextElement('article', '<Interactive.Article>'),

package/dist/cjs/Sequence.js

@@ -1,8 +1,41 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SequenceWithoutFrom = exports.Sequence = exports.SequenceWithoutSchema = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const AbsoluteFillElement_js_1 = require("./AbsoluteFillElement.js");
 const committed_metadata_js_1 = require("./committed-metadata.js");
 const component_identity_js_1 = require("./component-identity.js");
@@ -32,12 +65,14 @@ const SeriesContentVisibilityContext = (0, react_1.createContext)(true);
 const SequenceContextProvider = (0, committed_metadata_js_1.withCommittedMetadata)(SequenceContext_js_1.SequenceContext.Provider);
 const EMPTY_EFFECTS = [];
 const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playbackRate = 1, loop = false, freeze, durationInFrames, children, name, height, width, showInTimeline = true, hidden = false, controls, _remotionInternalEffects, _remotionInternalTimelineTrack: timelineTrackItem, _remotionInternalLoopDisplay: loopDisplay, _remotionInternalStack: stack, _remotionInternalSingleChildComponent: childComponentOverride, _remotionInternalDocumentationLink: documentationLink, _remotionInternalPremountDisplay: premountDisplay, _remotionInternalPostmountDisplay: postmountDisplay, _remotionInternalIsMedia: isMedia, cropLeft, cropRight, cropTop, cropBottom, ...other }, ref) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     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 activityRequested = (0, react_1.useContext)(sequence_activity_context_js_1.SequenceActivityContext);
     const parentDormant = (0, react_1.useContext)(sequence_activity_context_js_1.SequenceActivityDormantContext);
+    const activitySuspended = (0, react_1.useContext)(sequence_activity_context_js_1.SequenceActivitySuspensionContext);
+    const hadActivity = (0, react_1.useRef)(false);
     const env = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     const activityEnabled = activityRequested && env.isStudio && !env.isRendering;
     const timelineTrack = (0, react_1.useContext)(timeline_track_context_js_1.TimelineTrackContext);
@@ -521,7 +556,16 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, playba
                 (from + actualDurationInFrames) / parentPlaybackRate,
         }
         : null);
-    const renderActivity = activityEnabled && (!activityDormant || admitted);
+    const renderActivity = activityEnabled &&
+        (!activityDormant ||
+            admitted ||
+            (activitySuspended && hadActivity.current));
+    // A scene visited during playback must keep its children and registrations
+    // when it leaves the viewport, even if it was outside the discovery budget.
+    const useCommitEffect = (_j = react_1.default.useInsertionEffect) !== null && _j !== void 0 ? _j : react_1.useLayoutEffect;
+    useCommitEffect(() => {
+        hadActivity.current = renderActivity;
+    }, [renderActivity]);
     const content = (activityEnabled ? renderActivity : contentVisible)
         ? children
         : null;

package/dist/cjs/SequenceActivityBoundary.js

@@ -39,6 +39,19 @@ const react_1 = __importStar(require("react"));
 const sequence_activity_context_js_1 = require("./sequence-activity-context.js");
 const TimelineContext_js_1 = require("./TimelineContext.js");
 const use_video_config_js_1 = require("./use-video-config.js");
+// Resume through the context update, never through a wakeable callback. React
+// 19.2 can retry an already unmounted Activity with a null Offscreen stateNode.
+// Do not retain retry callbacks either: this token is shared by all activities.
+const suspendedActivity = { then: () => undefined };
+const SuspendSequenceActivity = ({ children, dormant }) => {
+    const suspended = (0, react_1.useContext)(sequence_activity_context_js_1.SequenceActivitySuspensionContext);
+    if (dormant && suspended) {
+        // The hidden Activity retains its last committed children when suspended,
+        // including the metadata used by Studio's timeline registry.
+        throw suspendedActivity;
+    }
+    return children;
+};
 const areActivityChildrenEqual = (previous, next) => {
     if (Object.is(previous, next)) {
         return true;
@@ -83,6 +96,6 @@ const SequenceActivityBoundary = ({ children, dormant, frame }) => {
     // Keep the providers and Activity at the same position when activating a
     // scene. Unlike Freeze, discovery does not reset SequenceContext origins or
     // disable Series duration inference.
-    return (jsx_runtime_1.jsx(sequence_activity_context_js_1.SequenceActivityDormantContext.Provider, { value: dormant, children: jsx_runtime_1.jsx(sequence_activity_context_js_1.SequenceActivityTimelineContext.Provider, { value: dormant ? dormantTimeline : null, children: jsx_runtime_1.jsx(sequence_activity_context_js_1.SequenceActivityAbsoluteTimeContext.Provider, { value: dormant ? dormantTimeline : null, children: jsx_runtime_1.jsx(TimelineContext_js_1.TimelineContext.Provider, { value: dormant ? dormantTimeline : timeline, children: jsx_runtime_1.jsx(TimelineContext_js_1.AbsoluteTimeContext.Provider, { value: dormant ? dormantTimeline : absoluteTime, children: jsx_runtime_1.jsx(react_1.default.Activity, { mode: dormant && !parentDormant ? 'hidden' : 'visible', children: children }) }) }) }) }) }));
+    return (jsx_runtime_1.jsx(sequence_activity_context_js_1.SequenceActivityDormantContext.Provider, { value: dormant, children: jsx_runtime_1.jsx(sequence_activity_context_js_1.SequenceActivityTimelineContext.Provider, { value: dormant ? dormantTimeline : null, children: jsx_runtime_1.jsx(sequence_activity_context_js_1.SequenceActivityAbsoluteTimeContext.Provider, { value: dormant ? dormantTimeline : null, children: jsx_runtime_1.jsx(TimelineContext_js_1.TimelineContext.Provider, { value: dormant ? dormantTimeline : timeline, children: jsx_runtime_1.jsx(TimelineContext_js_1.AbsoluteTimeContext.Provider, { value: dormant ? dormantTimeline : absoluteTime, children: jsx_runtime_1.jsx(react_1.default.Activity, { mode: dormant && !parentDormant ? 'hidden' : 'visible', children: jsx_runtime_1.jsx(SuspendSequenceActivity, { dormant: dormant, children: children }) }) }) }) }) }) }));
 };
 exports.SequenceActivityBoundary = SequenceActivityBoundary;