remotion 4.0.535 → 4.0.536

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/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

@@ -146,7 +146,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);
@@ -221,7 +221,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,
@@ -561,7 +561,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 +600,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;

package/dist/cjs/SequenceActivityBudget.js

@@ -50,8 +50,9 @@ const createActivityBudget = () => {
     let frame = {};
     let limit = sequence_activity_context_js_1.DEFAULT_SEQUENCE_ACTIVITY_LIMIT;
     let scheduled = false;
+    let suspended = false;
     const schedule = () => {
-        if (scheduled) {
+        if (scheduled || suspended) {
             return;
         }
         scheduled = true;
@@ -59,6 +60,9 @@ const createActivityBudget = () => {
         // whole commit, once all candidates and the root playhead are current.
         queueMicrotask(() => {
             scheduled = false;
+            if (suspended) {
+                return;
+            }
             const ranked = [...candidates.values()]
                 .filter((candidate) => candidate.end > candidate.from)
                 .map((candidate) => {
@@ -105,6 +109,12 @@ const createActivityBudget = () => {
     };
     return {
         ...registry,
+        setSuspended: (next) => {
+            if (suspended !== next) {
+                suspended = next;
+                schedule();
+            }
+        },
         setLimit: (next) => {
             if (limit !== next) {
                 limit = next;
@@ -133,10 +143,11 @@ const SequenceActivityBudgetProvider = ({ children }) => {
     var _a;
     const enabled = (0, react_1.useContext)(sequence_activity_context_js_1.SequenceActivityContext);
     const settings = (0, react_1.useContext)(sequence_activity_context_js_1.SequenceActivitySettingsContext);
+    const suspended = (0, react_1.useContext)(sequence_activity_context_js_1.SequenceActivitySuspensionContext);
     const limit = (_a = settings === null || settings === void 0 ? void 0 : settings.limit) !== null && _a !== void 0 ? _a : sequence_activity_context_js_1.DEFAULT_SEQUENCE_ACTIVITY_LIMIT;
-    const admitting = enabled && limit > 0;
+    const admitting = enabled && limit > 0 && limit !== Infinity;
     const [budget] = (0, react_1.useState)(createActivityBudget);
-    const timeline = (0, react_1.useContext)(admitting ? TimelineContext_js_1.TimelineContext : InactiveTimelineContext);
+    const timeline = (0, react_1.useContext)(admitting && !suspended ? TimelineContext_js_1.TimelineContext : InactiveTimelineContext);
     const selected = (0, use_sync_external_store_js_1.useSyncExternalStore)(budget.subscribe, budget.getSnapshot, budget.getSnapshot);
     // Shrinking the setting must not keep the old, larger selection for a commit
     // while the budget schedules its new snapshot.
@@ -146,26 +157,30 @@ const SequenceActivityBudgetProvider = ({ children }) => {
             ? new Set([...selected].slice(0, limit))
             : selected, [admitting, limit, selected]);
     useCommitEffect(() => {
+        // Retain the admitted trees while moving the playhead. Re-ranking would
+        // unmount their suspended content and remove its timeline registrations.
+        budget.setSuspended(suspended);
         budget.setLimit(admitting ? limit : 0);
         if (admitting && timeline !== null) {
             budget.setFrame(timeline.frame);
         }
-    }, [admitting, budget, limit, timeline]);
+    }, [admitting, budget, limit, suspended, timeline]);
     return (jsx_runtime_1.jsx(ActivityBudgetContext.Provider, { value: admitting ? budget : null, children: jsx_runtime_1.jsx(ActivitySelectionContext.Provider, { value: admitted, children: children }) }));
 };
 exports.SequenceActivityBudgetProvider = SequenceActivityBudgetProvider;
 const useSequenceActivityAdmission = (candidate) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f;
     const budget = (0, react_1.useContext)(ActivityBudgetContext);
     const enabled = (0, react_1.useContext)(sequence_activity_context_js_1.SequenceActivityContext);
     const settings = (0, react_1.useContext)(sequence_activity_context_js_1.SequenceActivitySettingsContext);
-    const unlimited = enabled && (settings === null || settings === void 0 ? void 0 : settings.limit) === -1;
+    const unlimited = enabled &&
+        ((_a = settings === null || settings === void 0 ? void 0 : settings.limit) !== null && _a !== void 0 ? _a : sequence_activity_context_js_1.DEFAULT_SEQUENCE_ACTIVITY_LIMIT) === Infinity;
     const selected = (0, react_1.useContext)(ActivitySelectionContext);
-    const id = (_a = candidate === null || candidate === void 0 ? void 0 : candidate.id) !== null && _a !== void 0 ? _a : null;
-    const parent = (_b = candidate === null || candidate === void 0 ? void 0 : candidate.parent) !== null && _b !== void 0 ? _b : null;
-    const compositionId = (_c = candidate === null || candidate === void 0 ? void 0 : candidate.compositionId) !== null && _c !== void 0 ? _c : null;
-    const from = (_d = candidate === null || candidate === void 0 ? void 0 : candidate.from) !== null && _d !== void 0 ? _d : null;
-    const end = (_e = candidate === null || candidate === void 0 ? void 0 : candidate.end) !== null && _e !== void 0 ? _e : null;
+    const id = (_b = candidate === null || candidate === void 0 ? void 0 : candidate.id) !== null && _b !== void 0 ? _b : null;
+    const parent = (_c = candidate === null || candidate === void 0 ? void 0 : candidate.parent) !== null && _c !== void 0 ? _c : null;
+    const compositionId = (_d = candidate === null || candidate === void 0 ? void 0 : candidate.compositionId) !== null && _d !== void 0 ? _d : null;
+    const from = (_e = candidate === null || candidate === void 0 ? void 0 : candidate.from) !== null && _e !== void 0 ? _e : null;
+    const end = (_f = candidate === null || candidate === void 0 ? void 0 : candidate.end) !== null && _f !== void 0 ? _f : null;
     const committedCandidate = (0, react_1.useMemo)(() => id !== null && compositionId !== null && from !== null && end !== null
         ? { id, parent, compositionId, from, end }
         : null, [id, parent, compositionId, from, end]);

package/dist/cjs/SequenceActivitySuspensionProvider.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const SequenceActivitySuspensionProvider: React.FC<{
+    readonly children: React.ReactNode;
+}>;

package/dist/cjs/SequenceActivitySuspensionProvider.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SequenceActivitySuspensionProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const sequence_activity_context_js_1 = require("./sequence-activity-context.js");
+const TimelineContext_js_1 = require("./TimelineContext.js");
+const SequenceActivitySuspensionProvider = ({ children }) => {
+    const enabled = (0, react_1.useContext)(sequence_activity_context_js_1.SequenceActivityContext);
+    const { isPlaying, subscribePlaying, seek } = (0, react_1.useContext)(TimelineContext_js_1.SetTimelineContext);
+    const [suspended, setSuspended] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (!enabled) {
+            setSuspended(false);
+            return;
+        }
+        let timeout = null;
+        const update = () => {
+            setSuspended(isPlaying() || timeout !== null);
+        };
+        const unsubscribePlaying = subscribePlaying(update);
+        const unsubscribeSeek = seek === null || seek === void 0 ? void 0 : seek.subscribe(() => {
+            setSuspended(true);
+            if (timeout !== null) {
+                clearTimeout(timeout);
+            }
+            // Repeated pointer, keyboard, and API seeks keep discovery suspended.
+            // Resume only once navigation settles, using the latest scene props.
+            timeout = setTimeout(() => {
+                timeout = null;
+                update();
+            }, 150);
+        });
+        update();
+        return () => {
+            unsubscribePlaying();
+            unsubscribeSeek === null || unsubscribeSeek === void 0 ? void 0 : unsubscribeSeek();
+            if (timeout !== null) {
+                clearTimeout(timeout);
+            }
+        };
+    }, [enabled, isPlaying, seek, subscribePlaying]);
+    return (jsx_runtime_1.jsx(sequence_activity_context_js_1.SequenceActivitySuspensionContext.Provider, { value: suspended, children: children }));
+};
+exports.SequenceActivitySuspensionProvider = SequenceActivitySuspensionProvider;

package/dist/cjs/SequenceManager.d.ts

@@ -67,6 +67,11 @@ export type CanUpdateSequencePropsResponseTrue<Numeric = SourceNumericValue> = {
     canUpdate: true;
     props: Record<string, CanUpdateSequencePropStatus<Numeric>>;
     effects: CanUpdateEffectPropsResponse<Numeric>[];
+    /** Source ranges also include interpolations outside the editable schema. */
+    durationDependentKeyframes: {
+        readonly scope: SequenceNodePath;
+        readonly inputRanges: readonly (readonly SourceNumericValue[] | null)[];
+    } | null;
 };
 export type CanUpdateSequencePropsResponseFalse = {
     canUpdate: false;

package/dist/cjs/SequenceManager.js

@@ -35,6 +35,7 @@ var __importStar = (this && this.__importStar) || (function () {
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
+var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SequenceManagerProvider = exports.VisualModeBatchSettersContext = exports.VisualModeSettersContext = exports.useEffectDragOverridesForNodePath = exports.useActiveFromDragOverrideKeys = exports.useDragOverridesForNodePath = exports.VisualModeDragOverridesRefContext = exports.VisualModeDragOverridesContext = exports.VisualModePropStatusesRefContext = exports.VisualModePropStatusesContext = exports.makeSequencePropsSubscriptionKey = exports.VisualModeDragOverridesSubscriptionContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -43,23 +44,26 @@ __exportStar(require("./sequence-registry-context.js"), exports);
 const sequence_activity_context_js_1 = require("./sequence-activity-context.js");
 const sequence_registry_context_js_1 = require("./sequence-registry-context.js");
 const SequenceActivityBudget_js_1 = require("./SequenceActivityBudget.js");
+const SequenceActivitySuspensionProvider_js_1 = require("./SequenceActivitySuspensionProvider.js");
 const SequenceRegistryProvider_js_1 = require("./SequenceRegistryProvider.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
 const use_sync_external_store_js_1 = require("./use-sync-external-store.js");
 const useIsomorphicLayoutEffect = typeof window === 'undefined' ? react_1.default.useEffect : react_1.default.useLayoutEffect;
+const useCommitEffect = (_a = react_1.default.useInsertionEffect) !== null && _a !== void 0 ? _a : useIsomorphicLayoutEffect;
 exports.VisualModeDragOverridesSubscriptionContext = react_1.default.createContext(null);
 const ActiveFromDragOverrideKeysContext = react_1.default.createContext(null);
 const SequenceManagerScopeProviders = ({ children, dragOverridesSubscription, fromKeys }) => {
+    var _a;
     const { isStudio } = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     const activitySettings = (0, react_1.useContext)(sequence_activity_context_js_1.SequenceActivitySettingsContext);
     const commitRegistrationEnabled = (0, react_1.useContext)(sequence_registry_context_js_1.SequenceCommitRegistrationContext);
     const manager = (0, react_1.useContext)(sequence_registry_context_js_1.SequenceManagerActionsContext);
     const scopedDragOverridesSubscription = (0, react_1.useMemo)(() => ({ ...dragOverridesSubscription, manager }), [dragOverridesSubscription, manager]);
     const activeFromDragOverrideKeys = (0, react_1.useMemo)(() => ({ manager, keys: fromKeys }), [fromKeys, manager]);
-    return (jsx_runtime_1.jsx(ActiveFromDragOverrideKeysContext.Provider, { value: activeFromDragOverrideKeys, children: jsx_runtime_1.jsx(exports.VisualModeDragOverridesSubscriptionContext.Provider, { value: scopedDragOverridesSubscription, children: jsx_runtime_1.jsx(sequence_activity_context_js_1.SequenceActivityContext.Provider, { value: (activitySettings === null || activitySettings === void 0 ? void 0 : activitySettings.enabled) === true &&
+    return (jsx_runtime_1.jsx(ActiveFromDragOverrideKeysContext.Provider, { value: activeFromDragOverrideKeys, children: jsx_runtime_1.jsx(exports.VisualModeDragOverridesSubscriptionContext.Provider, { value: scopedDragOverridesSubscription, children: jsx_runtime_1.jsx(sequence_activity_context_js_1.SequenceActivityContext.Provider, { value: ((_a = activitySettings === null || activitySettings === void 0 ? void 0 : activitySettings.limit) !== null && _a !== void 0 ? _a : sequence_activity_context_js_1.DEFAULT_SEQUENCE_ACTIVITY_LIMIT) > 0 &&
                     isStudio &&
                     commitRegistrationEnabled &&
-                    typeof react_1.default.Activity !== 'undefined', children: jsx_runtime_1.jsx(SequenceActivityBudget_js_1.SequenceActivityBudgetProvider, { children: children }) }) }) }));
+                    typeof react_1.default.Activity !== 'undefined', children: jsx_runtime_1.jsx(SequenceActivitySuspensionProvider_js_1.SequenceActivitySuspensionProvider, { children: jsx_runtime_1.jsx(SequenceActivityBudget_js_1.SequenceActivityBudgetProvider, { children: children }) }) }) }) }));
 };
 const emptyDragOverrides = {};
 const emptyFromOverrideKeys = new Set();
@@ -84,6 +88,20 @@ const defaultVisualModeDragOverrides = {
 };
 exports.VisualModeDragOverridesContext = react_1.default.createContext(defaultVisualModeDragOverrides);
 exports.VisualModeDragOverridesRefContext = react_1.default.createContext({ current: defaultVisualModeDragOverrides });
+const useDragOverrideSnapshot = (subscribe, getSnapshot) => {
+    const dormant = (0, react_1.useContext)(sequence_activity_context_js_1.SequenceActivityDormantContext);
+    const [, forceUpdate] = (0, react_1.useState)(0);
+    const snapshot = (0, use_sync_external_store_js_1.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+    useCommitEffect(() => {
+        if (!dormant) {
+            return;
+        }
+        // Activity disconnects passive subscriptions, including useSyncExternalStore.
+        // Insertion effects stay connected through nested hidden Activities.
+        return subscribe(() => forceUpdate((current) => current + 1));
+    }, [dormant, subscribe]);
+    return snapshot;
+};
 const useDragOverridesForNodePath = (nodePath) => {
     const subscription = (0, react_1.useContext)(exports.VisualModeDragOverridesSubscriptionContext);
     const manager = (0, react_1.useContext)(sequence_registry_context_js_1.SequenceManagerActionsContext);
@@ -97,7 +115,7 @@ const useDragOverridesForNodePath = (nodePath) => {
         var _a;
         return (_a = scopedSubscription === null || scopedSubscription === void 0 ? void 0 : scopedSubscription.getSnapshot(key)) !== null && _a !== void 0 ? _a : emptyDragOverrides;
     }, [key, scopedSubscription]);
-    return (0, use_sync_external_store_js_1.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+    return useDragOverrideSnapshot(subscribe, getSnapshot);
 };
 exports.useDragOverridesForNodePath = useDragOverridesForNodePath;
 const useActiveFromDragOverrideKeys = () => {
@@ -119,7 +137,7 @@ const useEffectDragOverridesForNodePath = (nodePath) => {
         var _a;
         return (_a = scopedSubscription === null || scopedSubscription === void 0 ? void 0 : scopedSubscription.getEffectSnapshot(key)) !== null && _a !== void 0 ? _a : emptyEffectDragOverrides;
     }, [key, scopedSubscription]);
-    return (0, use_sync_external_store_js_1.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+    return useDragOverrideSnapshot(subscribe, getSnapshot);
 };
 exports.useEffectDragOverridesForNodePath = useEffectDragOverridesForNodePath;
 exports.VisualModeSettersContext = react_1.default.createContext({

package/dist/cjs/Track.js

@@ -17,8 +17,7 @@ const trackSchema = {
 };
 const TrackWithoutSchema = ({ name = 'Track', children, layout = 'none', ...props }) => {
     const [id] = (0, react_1.useState)(() => String(Math.random()));
-    const tracksEnabled = (0, react_1.useContext)(timeline_track_context_js_1.ExperimentalTracksEnabledContext);
-    const value = (0, react_1.useMemo)(() => (tracksEnabled ? { id, name } : null), [id, name, tracksEnabled]);
+    const value = (0, react_1.useMemo)(() => ({ id, name }), [id, name]);
     return (jsx_runtime_1.jsx(timeline_track_context_js_1.TimelineTrackContext.Provider, { value: value, children: jsx_runtime_1.jsx(Sequence_js_1.SequenceWithoutSchema, { _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/track", ...props, name: name, layout: layout, _remotionInternalTimelineTrack: { role: 'track', seriesOffset: null }, children: children }) }));
 };
 exports.TrackWithoutSchema = TrackWithoutSchema;

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

@@ -1,6 +1,6 @@
 import type React from 'react';
 import type { SequenceControls } from '../CompositionManager.js';
-import type { EffectsProp } from '../effects/effect-types.js';
+import type { EffectsProp, EffectsOutputSize } from '../effects/effect-types.js';
 export declare const animatedImageSchema: {
     readonly 'style.transformOrigin': {
         readonly type: "transform-origin";
@@ -115,7 +115,7 @@ export declare const animatedImageSchema: {
     };
     readonly premountFor: {
         readonly type: "number";
-        readonly default: 0;
+        readonly default: undefined;
         readonly description: "Premount For";
         readonly min: 0;
         readonly step: 1;
@@ -236,6 +236,7 @@ export declare const AnimatedImage: React.ComponentType<import("../Interactive.j
     requestInit?: RequestInit | undefined;
 } & React.AriaAttributes & Record<`data-${string}`, string | undefined> & {
     readonly effects?: EffectsProp | undefined;
+    readonly effectsOutputSize?: EffectsOutputSize | undefined;
 } & {
     readonly controls?: SequenceControls | undefined;
     readonly ref?: React.Ref<HTMLCanvasElement> | undefined;