remotion 4.0.478 → 4.0.481

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

@@ -1,6 +1,6 @@
 import type { ImageFit } from '../calculate-image-fit.js';
 import type { EffectsProp } from '../effects/effect-types.js';
-import type { SequenceProps } from '../Sequence.js';
+import type { InteractiveBaseProps } from '../Interactive.js';
 export type RemotionAnimatedImageLoopBehavior = 'loop' | 'pause-after-finish' | 'clear-after-finish';
 export type RemotionAnimatedImageProps = {
     src: string;
@@ -15,8 +15,7 @@ export type RemotionAnimatedImageProps = {
     className?: string;
     requestInit?: RequestInit;
 };
-export type AnimatedImageProps = Omit<SequenceProps, 'children' | 'durationInFrames' | 'layout' | '_remotionInternalEffects'> & RemotionAnimatedImageProps & {
-    readonly durationInFrames?: number;
+export type AnimatedImageProps = InteractiveBaseProps & RemotionAnimatedImageProps & {
     readonly effects?: EffectsProp;
 };
 export type AnimatedImageFillMode = ImageFit;

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

@@ -55,6 +55,9 @@ export declare const canvasImageSchema: {
         readonly step: 1;
         readonly hiddenFromList: true;
     };
+    readonly hidden: import("../interactivity-schema.js").BooleanFieldSchema;
+    readonly name: import("../interactivity-schema.js").HiddenFieldSchema;
+    readonly showInTimeline: import("../interactivity-schema.js").HiddenFieldSchema;
     readonly fit: {
         readonly type: "enum";
         readonly default: "fill";
@@ -65,9 +68,8 @@ export declare const canvasImageSchema: {
             readonly cover: {};
         };
     };
-    readonly hidden: import("../sequence-field-schema.js").SequenceFieldSchema;
 };
-export declare const CanvasImage: import("react").ComponentType<Pick<import("../Sequence.js").SequenceProps, "durationInFrames" | "freeze" | "from" | "hidden" | "name" | "showInTimeline"> & {
+export declare const CanvasImage: import("react").ComponentType<import("../Interactive.js").InteractiveBaseProps & {
     readonly stack?: string | undefined;
 } & CanvasImageCanvasProps & {
     readonly src: string;
@@ -84,5 +86,5 @@ export declare const CanvasImage: import("react").ComponentType<Pick<import("../
     readonly delayRenderRetries?: number | undefined;
     readonly delayRenderTimeoutInMilliseconds?: number | undefined;
     readonly _remotionInternalDocumentationLink?: string | undefined;
-    readonly _remotionInternalRefForOutline?: RefObject<HTMLElement | null> | null | undefined;
+    readonly outlineRef?: RefObject<HTMLElement | null> | null | undefined;
 } & import("react").RefAttributes<HTMLCanvasElement>>;

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

@@ -8,18 +8,16 @@ 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");
 const enable_sequence_stack_traces_js_1 = require("../enable-sequence-stack-traces.js");
+const interactivity_schema_js_1 = require("../interactivity-schema.js");
 const prefetch_js_1 = require("../prefetch.js");
-const sequence_field_schema_js_1 = require("../sequence-field-schema.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");
 const use_buffer_state_js_1 = require("../use-buffer-state.js");
 const use_delay_render_js_1 = require("../use-delay-render.js");
-const wrap_in_schema_js_1 = require("../wrap-in-schema.js");
+const with_interactivity_schema_js_1 = require("../with-interactivity-schema.js");
 exports.canvasImageSchema = {
-    durationInFrames: sequence_field_schema_js_1.durationInFramesField,
-    from: sequence_field_schema_js_1.fromField,
-    freeze: sequence_field_schema_js_1.freezeField,
+    ...interactivity_schema_js_1.baseSchema,
     fit: {
         type: 'enum',
         default: 'fill',
@@ -30,8 +28,7 @@ exports.canvasImageSchema = {
             cover: {},
         },
     },
-    ...sequence_field_schema_js_1.sequenceVisualStyleSchema,
-    hidden: sequence_field_schema_js_1.hiddenField,
+    ...interactivity_schema_js_1.transformSchema,
 };
 const makeAbortError = () => {
     if (typeof DOMException !== 'undefined') {
@@ -94,6 +91,7 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
     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 memoizedEffects = (0, use_memoized_effects_js_1.useMemoizedEffects)({
@@ -120,9 +118,6 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
         }
     }, [ref, refForOutline]);
     (0, react_1.useEffect)(() => {
-        if (!outputCanvas || !sourceCanvas) {
-            return;
-        }
         const isPremounting = Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting);
         const isPostmounting = Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.postmounting);
         const handle = delayRender(`Rendering <CanvasImage> with src="${(0, truncate_src_for_label_js_1.truncateSrcForLabel)(actualSrc)}"`, {
@@ -137,6 +132,7 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
         let continued = false;
         let errorCount = 0;
         let timeoutId = null;
+        setLoadedImage(null);
         const continueRenderOnce = () => {
             if (continued) {
                 return;
@@ -151,31 +147,10 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
                 if (cancelled) {
                     return;
                 }
-                const canvasWidth = width !== null && width !== void 0 ? width : image.width;
-                const canvasHeight = height !== null && height !== void 0 ? height : image.height;
-                const sourceContext = sourceCanvas.getContext('2d', {
-                    colorSpace: 'srgb',
-                });
-                if (!sourceContext) {
-                    throw new Error('Could not get 2D context for <CanvasImage> source canvas');
-                }
-                sourceCanvas.width = canvasWidth;
-                sourceCanvas.height = canvasHeight;
-                outputCanvas.width = canvasWidth;
-                outputCanvas.height = canvasHeight;
-                sourceContext.clearRect(0, 0, canvasWidth, canvasHeight);
-                sourceContext.drawImage(image.element, ...(0, calculate_image_fit_js_1.calculateImageFit)(fit, { width: image.width, height: image.height }, { width: canvasWidth, height: canvasHeight }));
-                return (0, run_effect_chain_js_1.runEffectChain)({
-                    state: chainState.get(canvasWidth, canvasHeight),
-                    source: sourceCanvas,
-                    effects: memoizedEffects,
-                    output: outputCanvas,
-                    width: canvasWidth,
-                    height: canvasHeight,
-                });
+                setLoadedImage(image);
             })
-                .then((completed) => {
-                if (completed && !cancelled) {
+                .then(() => {
+                if (!cancelled) {
                     continueRenderOnce();
                 }
             })
@@ -216,28 +191,97 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
     }, [
         actualSrc,
         cancelRender,
-        chainState,
         continueRender,
         delayPlayback,
         delayRender,
         delayRenderRetries,
         delayRenderTimeoutInMilliseconds,
-        fit,
-        height,
         maxRetries,
-        memoizedEffects,
         onError,
-        outputCanvas,
         pauseWhenLoading,
         sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.postmounting,
         sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting,
+    ]);
+    (0, react_1.useEffect)(() => {
+        if (!loadedImage || !outputCanvas || !sourceCanvas) {
+            return;
+        }
+        const handle = delayRender(`Applying effects to <CanvasImage> with src="${(0, truncate_src_for_label_js_1.truncateSrcForLabel)(actualSrc)}"`);
+        let cancelled = false;
+        let continued = false;
+        const continueRenderOnce = () => {
+            if (continued) {
+                return;
+            }
+            continued = true;
+            continueRender(handle);
+        };
+        const canvasWidth = width !== null && width !== void 0 ? width : loadedImage.width;
+        const canvasHeight = height !== null && height !== void 0 ? height : loadedImage.height;
+        const sourceContext = sourceCanvas.getContext('2d', {
+            colorSpace: 'srgb',
+        });
+        if (!sourceContext) {
+            cancelRender(new Error('Could not get 2D context for <CanvasImage> source canvas'));
+            continueRenderOnce();
+            return () => {
+                continueRenderOnce();
+            };
+        }
+        sourceCanvas.width = canvasWidth;
+        sourceCanvas.height = canvasHeight;
+        outputCanvas.width = canvasWidth;
+        outputCanvas.height = canvasHeight;
+        sourceContext.clearRect(0, 0, canvasWidth, canvasHeight);
+        sourceContext.drawImage(loadedImage.element, ...(0, calculate_image_fit_js_1.calculateImageFit)(fit, { width: loadedImage.width, height: loadedImage.height }, { width: canvasWidth, height: canvasHeight }));
+        (0, run_effect_chain_js_1.runEffectChain)({
+            state: chainState.get(canvasWidth, canvasHeight),
+            source: sourceCanvas,
+            effects: memoizedEffects,
+            output: outputCanvas,
+            width: canvasWidth,
+            height: canvasHeight,
+        })
+            .then((completed) => {
+            if (completed && !cancelled) {
+                continueRenderOnce();
+            }
+        })
+            .catch((err) => {
+            if (cancelled) {
+                return;
+            }
+            if (onError) {
+                onError(err);
+                continueRenderOnce();
+            }
+            else {
+                cancelRender(err);
+            }
+        });
+        return () => {
+            cancelled = true;
+            continueRenderOnce();
+        };
+    }, [
+        actualSrc,
+        cancelRender,
+        chainState,
+        continueRender,
+        delayRender,
+        fit,
+        height,
+        loadedImage,
+        memoizedEffects,
+        onError,
+        outputCanvas,
         sourceCanvas,
         width,
     ]);
     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, width, height, fit, effects = [], className, style, id, onError, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, durationInFrames, from, freeze, hidden, name, showInTimeline, stack, _experimentalControls: controls, _remotionInternalDocumentationLink, _remotionInternalRefForOutline, ...canvasProps }, ref) => {
+const CanvasImageInner = (0, react_1.forwardRef)(({ src, width, height, fit, effects = [], className, style, id, onError, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, durationInFrames, from, freeze, hidden, name, showInTimeline, stack, controls, _remotionInternalDocumentationLink, outlineRef, ...canvasProps }, ref) => {
     if (!src) {
         throw new Error('No "src" prop was passed to <CanvasImage>.');
     }
@@ -246,14 +290,15 @@ const CanvasImageInner = (0, react_1.forwardRef)(({ src, width, height, fit, eff
     (0, react_1.useImperativeHandle)(ref, () => {
         return actualRef.current;
     }, []);
-    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, 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', _experimentalControls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalIsMedia: { type: 'image', src }, _remotionInternalStack: stack, _remotionInternalRefForOutline: _remotionInternalRefForOutline !== null && _remotionInternalRefForOutline !== void 0 ? _remotionInternalRefForOutline : actualRef, children: jsx_runtime_1.jsx(CanvasImageContent, { ref: actualRef, src: src, width: width, height: height, fit: fit, effects: effects, controls: controls, className: className, style: style, id: id, onError: onError, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, refForOutline: _remotionInternalRefForOutline !== null && _remotionInternalRefForOutline !== void 0 ? _remotionInternalRefForOutline : null, ...canvasProps }) }));
+    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, 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: { type: 'image', src }, _remotionInternalStack: stack, outlineRef: outlineRef !== null && outlineRef !== void 0 ? outlineRef : actualRef, children: jsx_runtime_1.jsx(CanvasImageContent, { ref: actualRef, src: src, width: width, height: height, fit: fit, effects: effects, controls: controls, className: className, style: style, id: id, onError: onError, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, refForOutline: outlineRef !== null && outlineRef !== void 0 ? outlineRef : null, ...canvasProps }) }));
 });
 /*
  * @description Renders a static image to a `<canvas>` and applies Remotion effects.
  * @see [Documentation](https://www.remotion.dev/docs/canvasimage)
  */
-exports.CanvasImage = (0, wrap_in_schema_js_1.wrapInSchema)({
+exports.CanvasImage = (0, with_interactivity_schema_js_1.withInteractivitySchema)({
     Component: CanvasImageInner,
+    componentName: '<CanvasImage>',
     componentIdentity: 'dev.remotion.remotion.CanvasImage',
     schema: exports.canvasImageSchema,
     supportsEffects: true,

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

@@ -1,8 +1,8 @@
 import type React from 'react';
 import type { ImageFit } from '../calculate-image-fit.js';
 import type { EffectsProp } from '../effects/effect-types.js';
-import type { SequenceProps } from '../Sequence.js';
-type CanvasImageSequenceProps = Pick<SequenceProps, 'durationInFrames' | 'from' | 'freeze' | 'hidden' | 'name' | 'showInTimeline'> & {
+import type { InteractiveBaseProps } from '../Interactive.js';
+type CanvasImageSequenceProps = InteractiveBaseProps & {
     /**
      * @deprecated For internal use only.
      */
@@ -28,8 +28,9 @@ export type CanvasImageProps = CanvasImageSequenceProps & CanvasImageCanvasProps
      */
     readonly _remotionInternalDocumentationLink?: string;
     /**
-     * @deprecated For internal use only.
+     * A React ref pointing to the element that Remotion Studio should use for
+     * drawing the selection outline in the preview.
      */
-    readonly _remotionInternalRefForOutline?: React.RefObject<HTMLElement | null> | null;
+    readonly outlineRef?: React.RefObject<HTMLElement | null> | null;
 };
 export {};

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { SequenceProps } from '../Sequence.js';
+import type { InteractiveBaseProps } from '../Interactive.js';
 import type { EffectsProp } from './effect-types.js';
 type MandatoryProps = {
     readonly width: number;
@@ -13,5 +13,5 @@ type OptionalProps = {
     readonly pixelDensity: number | undefined;
 };
 export type SolidProps = MandatoryProps & Partial<OptionalProps>;
-export declare const Solid: React.ComponentType<MandatoryProps & Partial<OptionalProps> & Pick<SequenceProps, "durationInFrames" | "freeze" | "from" | "hidden" | "name" | "showInTimeline"> & React.RefAttributes<HTMLCanvasElement>>;
+export declare const Solid: React.ComponentType<MandatoryProps & Partial<OptionalProps> & InteractiveBaseProps & React.RefAttributes<HTMLCanvasElement>>;
 export {};

package/dist/cjs/effects/Solid.js

@@ -4,10 +4,10 @@ exports.Solid = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const enable_sequence_stack_traces_js_1 = require("../enable-sequence-stack-traces.js");
-const sequence_field_schema_js_1 = require("../sequence-field-schema.js");
+const interactivity_schema_js_1 = require("../interactivity-schema.js");
 const Sequence_js_1 = require("../Sequence.js");
 const use_delay_render_js_1 = require("../use-delay-render.js");
-const wrap_in_schema_js_1 = require("../wrap-in-schema.js");
+const with_interactivity_schema_js_1 = require("../with-interactivity-schema.js");
 const run_effect_chain_js_1 = require("./run-effect-chain.js");
 const use_effect_chain_state_js_1 = require("./use-effect-chain-state.js");
 const use_memoized_effects_js_1 = require("./use-memoized-effects.js");
@@ -23,9 +23,7 @@ const resolveSolidPixelDensity = (pixelDensity) => {
     return pixelDensity;
 };
 const solidSchema = {
-    durationInFrames: sequence_field_schema_js_1.durationInFramesField,
-    from: sequence_field_schema_js_1.fromField,
-    freeze: sequence_field_schema_js_1.freezeField,
+    ...interactivity_schema_js_1.baseSchema,
     color: {
         type: 'color',
         default: 'transparent',
@@ -47,8 +45,7 @@ const solidSchema = {
         description: 'Height',
         hiddenFromList: false,
     },
-    ...sequence_field_schema_js_1.sequenceVisualStyleSchema,
-    hidden: sequence_field_schema_js_1.hiddenField,
+    ...interactivity_schema_js_1.transformSchema,
 };
 const SolidInner = ({ color, width, height, effects = [], className, style, pixelDensity, overrideId, reference, }) => {
     const { delayRender, continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
@@ -141,7 +138,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 = [], _experimentalControls: controls, color, height, width, className, durationInFrames, style, name, from, freeze, hidden, showInTimeline, pixelDensity, ...props }, ref) => {
+const SolidOuter = (0, react_1.forwardRef)(({ effects = [], controls, color, height, width, className, durationInFrames, style, name, from, freeze, hidden, showInTimeline, pixelDensity, ...props }, ref) => {
     var _a;
     props;
     const memoizedEffectDefinitions = (0, use_memoized_effects_js_1.useMemoizedEffectDefinitions)(effects);
@@ -149,10 +146,11 @@ const SolidOuter = (0, react_1.forwardRef)(({ effects = [], _experimentalControl
     (0, react_1.useImperativeHandle)(ref, () => {
         return actualRef.current;
     }, []);
-    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline, _experimentalControls: controls, _remotionInternalEffects: memoizedEffectDefinitions, durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : '<Solid>', _remotionInternalRefForOutline: actualRef, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/solid", ...props, children: jsx_runtime_1.jsx(SolidInner, { reference: actualRef, overrideId: (_a = controls === null || controls === void 0 ? void 0 : controls.overrideId) !== null && _a !== void 0 ? _a : null, color: color, height: height, width: width, className: className, style: style, effects: effects, pixelDensity: pixelDensity }) }));
+    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline, controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : '<Solid>', outlineRef: actualRef, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/solid", ...props, children: jsx_runtime_1.jsx(SolidInner, { reference: actualRef, overrideId: (_a = controls === null || controls === void 0 ? void 0 : controls.overrideId) !== null && _a !== void 0 ? _a : null, color: color, height: height, width: width, className: className, style: style, effects: effects, pixelDensity: pixelDensity }) }));
 });
-exports.Solid = (0, wrap_in_schema_js_1.wrapInSchema)({
+exports.Solid = (0, with_interactivity_schema_js_1.withInteractivitySchema)({
     Component: SolidOuter,
+    componentName: '<Solid>',
     componentIdentity: 'dev.remotion.remotion.Solid',
     schema: solidSchema,
     supportsEffects: true,

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

@@ -1,4 +1,4 @@
-import type { SequenceFieldSchema } from '../sequence-field-schema.js';
+import type { InteractivitySchemaField } from '../interactivity-schema.js';
 import type { EffectDefinition, EffectFactory } from './effect-types.js';
-export declare const disabledEffectField: SequenceFieldSchema;
+export declare const disabledEffectField: InteractivitySchemaField;
 export declare const createEffect: <P, S>(definition: EffectDefinition<P, S>) => EffectFactory<P>;

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

@@ -1,4 +1,4 @@
-import type { SequenceSchema } from '../sequence-field-schema.js';
+import type { InteractivitySchema } from '../interactivity-schema.js';
 export type Backend = '2d' | 'webgl2' | 'webgpu';
 type AnyGpuDevice = unknown;
 export type EffectApplyParams<P, S> = {
@@ -31,7 +31,7 @@ export type EffectDefinition<P, S = unknown> = {
     readonly setup: (target: HTMLCanvasElement) => S;
     readonly apply: (params: EffectApplyParams<P, S>) => void;
     readonly cleanup: (state: S) => void;
-    readonly schema: SequenceSchema;
+    readonly schema: InteractivitySchema;
     /** Throws when mandatory params are missing or invalid. Called by `createEffect` before returning a descriptor. */
     readonly validateParams: (params: P) => void;
 };

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

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

package/dist/cjs/effects/index.js

@@ -1,2 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.createEffect = void 0;
+const create_effect_js_1 = require("./create-effect.js");
+Object.defineProperty(exports, "createEffect", { enumerable: true, get: function () { return create_effect_js_1.createEffect; } });

package/dist/cjs/find-props-to-delete.d.ts

@@ -1,6 +1,6 @@
-import type { SequenceSchema } from './internals';
+import type { InteractivitySchema } from './internals';
 export declare const findPropsToDelete: ({ schema, key, value, }: {
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
     key: string;
     value: unknown;
 }) => string[];

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

@@ -1,4 +1,4 @@
-import type { SequenceSchema } from './sequence-field-schema';
+import type { InteractivitySchema } from './interactivity-schema';
 export type ResolveValue = (key: string) => unknown;
-export declare const flattenActiveSchema: (schema: SequenceSchema, resolve: ResolveValue) => SequenceSchema;
-export declare const getFlatSchemaWithAllKeys: (schema: SequenceSchema) => SequenceSchema;
+export declare const flattenActiveSchema: (schema: InteractivitySchema, resolve: ResolveValue) => InteractivitySchema;
+export declare const getFlatSchemaWithAllKeys: (schema: InteractivitySchema) => InteractivitySchema;

package/dist/cjs/index.d.ts

@@ -5,10 +5,10 @@ import type { AnyCompMetadata, AnyComposition, AudioOrVideoAsset, JsxComponentId
 import type { DelayRenderScope } from './delay-render.js';
 import { type TFolder } from './Folder.js';
 import type { StaticFile } from './get-static-files.js';
+import type { ArrayFieldSchema, ArrayItemFieldSchema, InteractivitySchemaField, InteractivitySchema } from './interactivity-schema.js';
 import type { LogLevel } from './log.js';
 import type { ProResProfile } from './prores-profile.js';
 import type { PixelFormat, VideoImageFormat } from './render-types.js';
-import type { ArrayFieldSchema, ArrayItemFieldSchema, SequenceFieldSchema, SequenceSchema } from './sequence-field-schema.js';
 import type { UseBufferState } from './use-buffer-state';
 import type { VideoConfig } from './video-config.js';
 export type VideoConfigWithSerializedProps = Omit<VideoConfig, 'defaultProps' | 'props'> & {
@@ -94,7 +94,7 @@ export type BundleEvaluationState = {
 export type BundleState = BundleIndexState | BundleEvaluationState | BundleCompositionState;
 export * from './AbsoluteFill.js';
 export * from './animated-image/index.js';
-export type { EffectDefinition, EffectDefinitionAndStack, EffectDescriptor, EffectFactory, EffectsProp, } from './effects/index.js';
+export { createEffect, type Backend, type EffectApplyParams, type EffectDefinition, type EffectDefinitionAndStack, type EffectDescriptor, type EffectFactory, type EffectsProp, } from './effects/index.js';
 /**
  * @description Renders a solid-color rectangle on a `<canvas>`.
  * @see [Documentation](https://www.remotion.dev/docs/solid)
@@ -127,7 +127,7 @@ export { getRemotionEnvironment } from './get-remotion-environment.js';
 export { getStaticFiles, StaticFile } from './get-static-files.js';
 export * from './IFrame.js';
 export { Img, ImgProps } from './Img.js';
-export { Interactive, type InteractiveProps } from './Interactive.js';
+export { Interactive, type InteractiveBaseProps, type InteractivePremountProps, type InteractiveProps, type InteractiveTransformProps, } from './Interactive.js';
 export * from './internals.js';
 export { interpolateColors, type InterpolateColorsOptions, } from './interpolate-colors.js';
 export { LogLevel } from './log.js';
@@ -182,4 +182,4 @@ export type _InternalTypes = {
     TRenderAsset: TRenderAsset;
     ProResProfile: ProResProfile;
 };
-export type { AnyComposition, ArrayFieldSchema, ArrayItemFieldSchema, DelayRenderScope, JsxComponentIdentity, LoopDisplay, SequenceControls, SequenceFieldSchema, SequenceSchema, UseBufferState, };
+export type { AnyComposition, ArrayFieldSchema, ArrayItemFieldSchema, DelayRenderScope, JsxComponentIdentity, LoopDisplay, SequenceControls, InteractivitySchemaField, InteractivitySchema, UseBufferState, };

package/dist/cjs/index.js

@@ -14,7 +14,7 @@ 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);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Config = exports.Experimental = exports.watchStaticFile = exports.MediaPlaybackError = exports.Video = exports.OffthreadVideo = exports.Html5Video = exports.useRemotionEnvironment = exports.usePixelDensity = exports.useDelayRender = exports.useCurrentScale = exports.useCurrentFrame = exports.useBufferState = exports.staticFile = exports.Series = exports.Sequence = exports.registerRoot = exports.prefetch = exports.random = exports.interpolate = exports.assertValidInterpolatePosterizeOption = exports.assertValidInterpolateEasingOption = exports.Loop = exports.interpolateColors = exports.Interactive = exports.Img = exports.getStaticFiles = exports.getRemotionEnvironment = exports.delayRender = exports.continueRender = exports.getInputProps = exports.Composition = exports.CanvasImage = exports.isHtmlInCanvasSupported = exports.HtmlInCanvas = exports.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE = exports.Solid = exports.cancelRender = exports.Html5Audio = exports.Audio = exports.Artifact = void 0;
+exports.Config = exports.Experimental = exports.watchStaticFile = exports.MediaPlaybackError = exports.Video = exports.OffthreadVideo = exports.Html5Video = exports.useRemotionEnvironment = exports.usePixelDensity = exports.useDelayRender = exports.useCurrentScale = exports.useCurrentFrame = exports.useBufferState = exports.staticFile = exports.Series = exports.Sequence = exports.registerRoot = exports.prefetch = exports.random = exports.interpolate = exports.assertValidInterpolatePosterizeOption = exports.assertValidInterpolateEasingOption = exports.Loop = exports.interpolateColors = exports.Interactive = exports.Img = exports.getStaticFiles = exports.getRemotionEnvironment = exports.delayRender = exports.continueRender = exports.getInputProps = exports.Composition = exports.CanvasImage = exports.isHtmlInCanvasSupported = exports.HtmlInCanvas = exports.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE = exports.Solid = exports.cancelRender = exports.Html5Audio = exports.Audio = exports.Artifact = exports.createEffect = void 0;
 require("./_check-rsc.js");
 require("./asset-types.js");
 const Clipper_js_1 = require("./Clipper.js");
@@ -28,11 +28,13 @@ const Sequence_js_1 = require("./Sequence.js");
 (0, multiple_versions_warning_js_1.checkMultipleRemotionVersions)();
 __exportStar(require("./AbsoluteFill.js"), exports);
 __exportStar(require("./animated-image/index.js"), exports);
+const index_js_1 = require("./effects/index.js");
+Object.defineProperty(exports, "createEffect", { enumerable: true, get: function () { return index_js_1.createEffect; } });
 const Artifact_js_1 = require("./Artifact.js");
 Object.defineProperty(exports, "Artifact", { enumerable: true, get: function () { return Artifact_js_1.Artifact; } });
-const index_js_1 = require("./audio/index.js");
-Object.defineProperty(exports, "Audio", { enumerable: true, get: function () { return index_js_1.Audio; } });
-Object.defineProperty(exports, "Html5Audio", { enumerable: true, get: function () { return index_js_1.Html5Audio; } });
+const index_js_2 = require("./audio/index.js");
+Object.defineProperty(exports, "Audio", { enumerable: true, get: function () { return index_js_2.Audio; } });
+Object.defineProperty(exports, "Html5Audio", { enumerable: true, get: function () { return index_js_2.Html5Audio; } });
 const cancel_render_js_1 = require("./cancel-render.js");
 Object.defineProperty(exports, "cancelRender", { enumerable: true, get: function () { return cancel_render_js_1.cancelRender; } });
 const Solid_js_1 = require("./effects/Solid.js");
@@ -45,8 +47,8 @@ Object.defineProperty(exports, "isHtmlInCanvasSupported", { enumerable: true, ge
  * @description Renders a static image to a `<canvas>` and applies Remotion effects.
  * @see [Documentation](https://www.remotion.dev/docs/canvasimage)
  */
-const index_js_2 = require("./canvas-image/index.js");
-Object.defineProperty(exports, "CanvasImage", { enumerable: true, get: function () { return index_js_2.CanvasImage; } });
+const index_js_3 = require("./canvas-image/index.js");
+Object.defineProperty(exports, "CanvasImage", { enumerable: true, get: function () { return index_js_3.CanvasImage; } });
 const Composition_js_2 = require("./Composition.js");
 Object.defineProperty(exports, "Composition", { enumerable: true, get: function () { return Composition_js_2.Composition; } });
 const input_props_js_1 = require("./config/input-props.js");
@@ -69,8 +71,8 @@ Object.defineProperty(exports, "Interactive", { enumerable: true, get: function
 __exportStar(require("./internals.js"), exports);
 const interpolate_colors_js_1 = require("./interpolate-colors.js");
 Object.defineProperty(exports, "interpolateColors", { enumerable: true, get: function () { return interpolate_colors_js_1.interpolateColors; } });
-const index_js_3 = require("./loop/index.js");
-Object.defineProperty(exports, "Loop", { enumerable: true, get: function () { return index_js_3.Loop; } });
+const index_js_4 = require("./loop/index.js");
+Object.defineProperty(exports, "Loop", { enumerable: true, get: function () { return index_js_4.Loop; } });
 const no_react_1 = require("./no-react");
 Object.defineProperty(exports, "assertValidInterpolateEasingOption", { enumerable: true, get: function () { return no_react_1.assertValidInterpolateEasingOption; } });
 Object.defineProperty(exports, "assertValidInterpolatePosterizeOption", { enumerable: true, get: function () { return no_react_1.assertValidInterpolatePosterizeOption; } });
@@ -82,8 +84,8 @@ const register_root_js_1 = require("./register-root.js");
 Object.defineProperty(exports, "registerRoot", { enumerable: true, get: function () { return register_root_js_1.registerRoot; } });
 const Sequence_js_2 = require("./Sequence.js");
 Object.defineProperty(exports, "Sequence", { enumerable: true, get: function () { return Sequence_js_2.Sequence; } });
-const index_js_4 = require("./series/index.js");
-Object.defineProperty(exports, "Series", { enumerable: true, get: function () { return index_js_4.Series; } });
+const index_js_5 = require("./series/index.js");
+Object.defineProperty(exports, "Series", { enumerable: true, get: function () { return index_js_5.Series; } });
 __exportStar(require("./spring/index.js"), exports);
 const static_file_js_1 = require("./static-file.js");
 Object.defineProperty(exports, "staticFile", { enumerable: true, get: function () { return static_file_js_1.staticFile; } });
@@ -103,10 +105,10 @@ Object.defineProperty(exports, "useRemotionEnvironment", { enumerable: true, get
 __exportStar(require("./use-video-config.js"), exports);
 __exportStar(require("./version.js"), exports);
 __exportStar(require("./video-config.js"), exports);
-const index_js_5 = require("./video/index.js");
-Object.defineProperty(exports, "Html5Video", { enumerable: true, get: function () { return index_js_5.Html5Video; } });
-Object.defineProperty(exports, "OffthreadVideo", { enumerable: true, get: function () { return index_js_5.OffthreadVideo; } });
-Object.defineProperty(exports, "Video", { enumerable: true, get: function () { return index_js_5.Video; } });
+const index_js_6 = require("./video/index.js");
+Object.defineProperty(exports, "Html5Video", { enumerable: true, get: function () { return index_js_6.Html5Video; } });
+Object.defineProperty(exports, "OffthreadVideo", { enumerable: true, get: function () { return index_js_6.OffthreadVideo; } });
+Object.defineProperty(exports, "Video", { enumerable: true, get: function () { return index_js_6.Video; } });
 const MediaPlaybackError_js_1 = require("./video/MediaPlaybackError.js");
 Object.defineProperty(exports, "MediaPlaybackError", { enumerable: true, get: function () { return MediaPlaybackError_js_1.MediaPlaybackError; } });
 const watch_static_file_js_1 = require("./watch-static-file.js");