remotion 4.0.534 → 4.0.536

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

@@ -12,6 +12,7 @@ const freeze_js_1 = require("../freeze.js");
 const interactivity_schema_js_1 = require("../interactivity-schema.js");
 const prefetch_js_1 = require("../prefetch.js");
 const resolve_sequence_duration_js_1 = require("../resolve-sequence-duration.js");
+const sequence_activity_context_js_1 = require("../sequence-activity-context.js");
 const Sequence_js_1 = require("../Sequence.js");
 const SequenceContext_js_1 = require("../SequenceContext.js");
 const truncate_src_for_label_js_1 = require("../truncate-src-for-label.js");
@@ -110,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,
@@ -329,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>.');
     }
@@ -364,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(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/committed-metadata.d.ts

@@ -0,0 +1,68 @@
+import type { Provider, ProviderExoticComponent, ProviderProps, RefObject } from 'react';
+import type { AnyComposition, TSequence } from './CompositionManager.js';
+import type { TFolder } from './Folder.js';
+export declare const COMMIT_ORDER_EVENT = "remotion:commit-order";
+export declare const COMMIT_REGISTRATION_ERROR_EVENT = "remotion:commit-registration-error";
+export declare const isCommitRegistrationObserverInstalled: () => boolean;
+export type CompositionAndFolderOrderItem = {
+    readonly type: 'composition';
+    readonly id: string;
+} | {
+    readonly type: 'folder';
+    readonly id: string;
+};
+export declare const getCompositionAndFolderOrderKey: (item: CompositionAndFolderOrderItem) => string;
+export type CommitOrderEventDetail = {
+    readonly sequenceManagers: readonly {
+        readonly managerId: string;
+        readonly sequenceIds: readonly string[];
+    }[];
+};
+export declare const getFolderOrderId: ({ name, parent, }: {
+    readonly name: string;
+    readonly parent: string | null;
+}) => string;
+export type CommittedSequenceSnapshot = {
+    readonly sequences: readonly TSequence[];
+    readonly sequenceIds: readonly string[];
+};
+export type CommittedCompositionSnapshot = {
+    readonly compositions: readonly AnyComposition[];
+    readonly folders: readonly TFolder[];
+    readonly orderIds: readonly string[];
+};
+export type CommittedMetadata = {
+    readonly type: 'sequence';
+    readonly id: string;
+    readonly value: TSequence | null;
+    readonly outlineChildrenRef: RefObject<Element | null> | null;
+} | {
+    readonly type: 'composition';
+    readonly id: string;
+    readonly value: AnyComposition;
+} | {
+    readonly type: 'folder';
+    readonly id: string;
+    readonly value: TFolder;
+} | {
+    readonly type: 'sequence-manager';
+    readonly id: string;
+    readonly onCommit: ((sequences: readonly TSequence[], sequenceIds: readonly string[]) => void) | null;
+} | {
+    readonly type: 'composition-manager';
+    readonly id: string;
+    readonly onCommit: ((snapshot: CommittedCompositionSnapshot) => void) | null;
+};
+export declare const withCommittedMetadata: <T>(provider: Provider<T>) => ProviderExoticComponent<ProviderProps<T> & {
+    readonly _remotionCommitMetadata: CommittedMetadata | null;
+}>;
+export declare const CommittedMetadataProvider: ProviderExoticComponent<ProviderProps<null> & {
+    readonly _remotionCommitMetadata: CommittedMetadata | null;
+}>;
+export declare const CommittedMetadataInternals: {
+    metadataProp: "_remotionCommitMetadata";
+    eventName: string;
+    installationMarker: symbol;
+    failureMarker: symbol;
+    registrationErrorEventName: string;
+};

package/dist/cjs/committed-metadata.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommittedMetadataInternals = exports.CommittedMetadataProvider = exports.withCommittedMetadata = exports.getFolderOrderId = exports.getCompositionAndFolderOrderKey = exports.isCommitRegistrationObserverInstalled = exports.COMMIT_REGISTRATION_ERROR_EVENT = exports.COMMIT_ORDER_EVENT = void 0;
+const react_1 = require("react");
+const COMMITTED_METADATA_PROP = '_remotionCommitMetadata';
+exports.COMMIT_ORDER_EVENT = 'remotion:commit-order';
+exports.COMMIT_REGISTRATION_ERROR_EVENT = 'remotion:commit-registration-error';
+const COMMIT_OBSERVER_INSTALLATION_MARKER = Symbol.for('remotion.commit-order-observer-installed');
+const COMMIT_OBSERVER_FAILURE_MARKER = Symbol.for('remotion.commit-registration-observer-failed');
+const isCommitRegistrationObserverInstalled = () => {
+    if (typeof window === 'undefined') {
+        return false;
+    }
+    const hook = Reflect.get(window, '__REACT_DEVTOOLS_GLOBAL_HOOK__');
+    return (typeof hook === 'object' &&
+        hook !== null &&
+        Reflect.get(hook, 'isDisabled') !== true &&
+        Reflect.get(hook, COMMIT_OBSERVER_INSTALLATION_MARKER) === true &&
+        Reflect.get(hook, COMMIT_OBSERVER_FAILURE_MARKER) !== true);
+};
+exports.isCommitRegistrationObserverInstalled = isCommitRegistrationObserverInstalled;
+const getCompositionAndFolderOrderKey = (item) => `${item.type}:${item.id}`;
+exports.getCompositionAndFolderOrderKey = getCompositionAndFolderOrderKey;
+const getFolderOrderId = ({ name, parent, }) => [parent, name].filter(Boolean).join('/');
+exports.getFolderOrderId = getFolderOrderId;
+// This is the same provider, with an additional private prop type. Metadata
+// stays outside its context value, so edits do not notify context consumers.
+const withCommittedMetadata = (provider) => provider;
+exports.withCommittedMetadata = withCommittedMetadata;
+// Leaves without an existing provider still need a committed Fiber when their
+// content is null. Its constant context value never carries registry metadata.
+exports.CommittedMetadataProvider = (0, exports.withCommittedMetadata)((0, react_1.createContext)(null).Provider);
+exports.CommittedMetadataInternals = {
+    metadataProp: COMMITTED_METADATA_PROP,
+    eventName: exports.COMMIT_ORDER_EVENT,
+    installationMarker: COMMIT_OBSERVER_INSTALLATION_MARKER,
+    failureMarker: COMMIT_OBSERVER_FAILURE_MARKER,
+    registrationErrorEventName: exports.COMMIT_REGISTRATION_ERROR_EVENT,
+};

package/dist/cjs/component-identity.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+type ComponentIdentityResolver = (component: unknown) => unknown;
+export declare const setComponentIdentityResolver: (resolver: ComponentIdentityResolver | null) => void;
+export declare const resolveComponentIdentity: (component: unknown) => unknown;
+export declare const getSingleChildComponent: (children: React.ReactNode) => unknown;
+export {};

package/dist/cjs/component-identity.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSingleChildComponent = exports.resolveComponentIdentity = exports.setComponentIdentityResolver = void 0;
+const react_1 = __importDefault(require("react"));
+const is_inside_series_js_1 = require("./series/is-inside-series.js");
+// Studio installs a resolver that maps refreshed component implementations to
+// the stable family object maintained by React Refresh.
+let componentIdentityResolver = null;
+const setComponentIdentityResolver = (resolver) => {
+    componentIdentityResolver = resolver;
+};
+exports.setComponentIdentityResolver = setComponentIdentityResolver;
+const resolveComponentIdentity = (component) => {
+    var _a;
+    return (_a = componentIdentityResolver === null || componentIdentityResolver === void 0 ? void 0 : componentIdentityResolver(component)) !== null && _a !== void 0 ? _a : component;
+};
+exports.resolveComponentIdentity = resolveComponentIdentity;
+const getSingleChildComponent = (children) => {
+    const mountedChildren = react_1.default.Children.toArray(children);
+    if (mountedChildren.length !== 1) {
+        return null;
+    }
+    const child = mountedChildren[0];
+    if (!react_1.default.isValidElement(child)) {
+        return null;
+    }
+    // Series inserts this transparent context boundary around its authored children.
+    if (child.type === is_inside_series_js_1.IsNotInsideSeriesProvider) {
+        return (0, exports.getSingleChildComponent)(child.props.children);
+    }
+    if (typeof child.type !== 'function' && typeof child.type !== 'object') {
+        return null;
+    }
+    return (0, exports.resolveComponentIdentity)(child.type);
+};
+exports.getSingleChildComponent = getSingleChildComponent;

package/dist/cjs/composition-registry-fallback.d.ts

@@ -0,0 +1,14 @@
+import type { AnyComposition } from './CompositionManager.js';
+import type { TFolder } from './Folder.js';
+export type CommittedCompositionEntry = {
+    readonly type: 'composition';
+    readonly value: AnyComposition;
+} | {
+    readonly type: 'folder';
+    readonly value: TFolder;
+};
+export declare const CompositionRegistryFallbackContext: import("react").Context<{
+    readonly entries: Map<object, CommittedCompositionEntry>;
+    readonly notifyCommit: () => void;
+} | null>;
+export declare const useCommittedCompositionEntry: (entry: CommittedCompositionEntry | null) => void;

package/dist/cjs/composition-registry-fallback.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCommittedCompositionEntry = exports.CompositionRegistryFallbackContext = void 0;
+const react_1 = require("react");
+exports.CompositionRegistryFallbackContext = (0, react_1.createContext)(null);
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? react_1.useEffect : react_1.useLayoutEffect;
+// The fallback stages descriptors during layout effects and publishes one
+// complete snapshot after the commit, including mount and unmount changes.
+const useCommittedCompositionEntry = (entry) => {
+    const registry = (0, react_1.useContext)(exports.CompositionRegistryFallbackContext);
+    const key = (0, react_1.useRef)({});
+    useIsomorphicLayoutEffect(() => {
+        if (registry === null) {
+            return;
+        }
+        if (entry === null) {
+            registry.entries.delete(key.current);
+        }
+        else {
+            registry.entries.set(key.current, entry);
+        }
+        registry.notifyCommit();
+    }, [entry, registry]);
+    useIsomorphicLayoutEffect(() => {
+        if (registry === null) {
+            return;
+        }
+        const identity = key.current;
+        return () => {
+            registry.entries.delete(identity);
+            registry.notifyCommit();
+        };
+    }, [registry]);
+};
+exports.useCommittedCompositionEntry = useCommittedCompositionEntry;

package/dist/cjs/create-element-source-proxy.d.ts

@@ -0,0 +1,4 @@
+import type React from 'react';
+import type JsxRuntimeDev from 'react/jsx-dev-runtime';
+import type JsxRuntime from 'react/jsx-runtime';
+export declare const createElementSourceProxy: <T extends typeof React.createElement | typeof JsxRuntime.jsx | typeof JsxRuntimeDev.jsxDEV>(api: T, sourceArgumentIndex: number | null, getSourceFileName: (fileName: string) => string) => T;

package/dist/cjs/create-element-source-proxy.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createElementSourceProxy = void 0;
+const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
+const componentsToAddStacksTo = (0, enable_sequence_stack_traces_js_1.getComponentsToAddStacksTo)();
+const internalStackProp = enable_sequence_stack_traces_js_1.REMOTION_INTERNAL_STACK_PROP;
+const createElementSourceProxy = (api, sourceArgumentIndex, getSourceFileName) => {
+    return new Proxy(api, {
+        apply(target, thisArg, argArray) {
+            const component = argArray[0];
+            if (componentsToAddStacksTo.includes(component)) {
+                const [first, props, ...rest] = argArray;
+                const source = sourceArgumentIndex === null ? null : argArray[sourceArgumentIndex];
+                const existingStack = props === null || props === void 0 ? void 0 : props[internalStackProp];
+                // Internal wrappers already captured the authored location in their controls.
+                const controlsStack = !existingStack &&
+                    component === (0, enable_sequence_stack_traces_js_1.getSequenceComponent)() &&
+                    (props === null || props === void 0 ? void 0 : props.controls)
+                    ? (0, enable_sequence_stack_traces_js_1.getStackForControls)(props.controls)
+                    : null;
+                const stack = existingStack ||
+                    (controlsStack !== null && controlsStack !== void 0 ? controlsStack : (source &&
+                        typeof source.fileName === 'string' &&
+                        typeof source.lineNumber === 'number' &&
+                        typeof source.columnNumber === 'number'
+                        ? (0, enable_sequence_stack_traces_js_1.makeOriginalSourceStack)({
+                            fileName: getSourceFileName(source.fileName),
+                            lineNumber: source.lineNumber,
+                            // JSX development locations are one-based, like stack traces.
+                            // Resolved source locations and AST lookups use zero-based columns.
+                            columnNumber: source.columnNumber - 1,
+                        })
+                        : new Error().stack));
+                const newProps = existingStack
+                    ? { ...props }
+                    : {
+                        ...(props !== null && props !== void 0 ? props : {}),
+                        [internalStackProp]: stack,
+                    };
+                return Reflect.apply(target, thisArg, [first, newProps, ...rest]);
+            }
+            return Reflect.apply(target, thisArg, argArray);
+        },
+    });
+};
+exports.createElementSourceProxy = createElementSourceProxy;

package/dist/cjs/default-premount-in-seconds.d.ts

@@ -0,0 +1,3 @@
+export declare const DEFAULT_PREMOUNT_IN_SECONDS: number;
+export declare const DEFAULT_STUDIO_PREMOUNT_IN_SECONDS = 2;
+export declare const validateDefaultPremountInSeconds: (value: unknown) => void;

package/dist/cjs/default-premount-in-seconds.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateDefaultPremountInSeconds = exports.DEFAULT_STUDIO_PREMOUNT_IN_SECONDS = exports.DEFAULT_PREMOUNT_IN_SECONDS = void 0;
+const v5_flag_js_1 = require("./v5-flag.js");
+exports.DEFAULT_PREMOUNT_IN_SECONDS = v5_flag_js_1.ENABLE_V5_BREAKING_CHANGES ? 2 : 0;
+exports.DEFAULT_STUDIO_PREMOUNT_IN_SECONDS = 2;
+const validateDefaultPremountInSeconds = (value) => {
+    if (typeof value !== 'number' || !Number.isFinite(value) || value < 0) {
+        throw new TypeError(`defaultPremountInSeconds must be a finite, non-negative number, but got ${String(value)}.`);
+    }
+};
+exports.validateDefaultPremountInSeconds = validateDefaultPremountInSeconds;

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

@@ -7,6 +7,7 @@ const enable_sequence_stack_traces_js_1 = require("../enable-sequence-stack-trac
 const freeze_js_1 = require("../freeze.js");
 const interactivity_schema_js_1 = require("../interactivity-schema.js");
 const resolve_sequence_duration_js_1 = require("../resolve-sequence-duration.js");
+const sequence_activity_context_js_1 = require("../sequence-activity-context.js");
 const Sequence_js_1 = require("../Sequence.js");
 const use_crop_style_js_1 = require("../use-crop-style.js");
 const use_delay_render_js_1 = require("../use-delay-render.js");
@@ -65,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);
@@ -85,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') {
@@ -157,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);
@@ -187,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(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/canvas-pool.d.ts

@@ -9,6 +9,7 @@ export declare class CanvasPool {
     private readonly onContextLost;
     private disposed;
     constructor(width: number, height: number, onContextLost: (canvas: HTMLCanvasElement) => void);
+    getCanvas(backend: Backend, index: 0 | 1): HTMLCanvasElement;
     getPair(backend: Backend): CanvasPair;
     assertContextNotLost(canvas: HTMLCanvasElement): void;
     dispose(): void;

package/dist/cjs/effects/canvas-pool.js

@@ -30,20 +30,25 @@ class CanvasPool {
         this.height = height;
         this.onContextLost = onContextLost;
     }
-    getPair(backend) {
+    getCanvas(backend, index) {
+        var _a;
         if (this.disposed) {
             throw new Error('Effect chain state was used after it had been cleaned up');
         }
-        const existing = this.pairs.get(backend);
-        if (existing) {
-            return existing;
+        let pair = this.pairs.get(backend);
+        if (!pair) {
+            pair = [null, null];
+            this.pairs.set(backend, pair);
         }
-        const pair = [
-            this.allocateCanvas(backend),
-            this.allocateCanvas(backend),
-        ];
-        this.pairs.set(backend, pair);
-        return pair;
+        // A single effect needs one target. Allocate its ping-pong partner only
+        // when a later pass actually uses it.
+        (_a = pair[index]) !== null && _a !== void 0 ? _a : (pair[index] = this.allocateCanvas(backend));
+        return pair[index];
+    }
+    getPair(backend) {
+        this.getCanvas(backend, 0);
+        this.getCanvas(backend, 1);
+        return this.pairs.get(backend);
     }
     assertContextNotLost(canvas) {
         if (this.lostContexts.has(canvas)) {

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