remotion 4.0.460 → 4.0.462

package/dist/cjs/CompositionManager.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import type { AnyZodObject } from './any-zod-type.js';
 import type { CalculateMetadataFunction } from './Composition.js';
 import type { DownloadBehavior } from './download-behavior.js';
-import type { EffectDefinitionAndStack } from './effects/effect-types.js';
+import type { EffectDefinition } from './effects/effect-types.js';
 import type { NonceHistory } from './nonce.js';
 import type { InferProps, PropsIfHasProps } from './props-if-has-props.js';
 import type { SequenceSchema } from './sequence-field-schema.js';
@@ -69,7 +69,7 @@ export type TSequence = {
     premountDisplay: number | null;
     postmountDisplay: number | null;
     controls: SequenceControls | null;
-    effects: EffectDefinitionAndStack<unknown>[];
+    effects: readonly EffectDefinition<unknown>[];
 } & EnhancedTSequenceData;
 export type AudioOrVideoAsset = {
     type: 'audio' | 'video';

package/dist/cjs/HtmlInCanvas.d.ts

@@ -42,10 +42,12 @@ export type HtmlInCanvasOnPaintParams = {
     readonly elementImage: ElementImage;
 };
 export declare const isHtmlInCanvasSupported: () => boolean;
+/** Shown when {@link isHtmlInCanvasSupported} is false: APIs are absent (old Chrome and/or flag off). */
+export declare const HTML_IN_CANVAS_UNSUPPORTED_MESSAGE = "HTML in Canvas is not supported. Two common causes: Chrome is older than version 148 (update Chrome), or the HTML-in-Canvas flag is disabled at chrome://flags/#canvas-draw-element (enable it and restart Chrome).";
 export type HtmlInCanvasOnPaint = (params: HtmlInCanvasOnPaintParams) => void | Promise<void>;
 export type HtmlInCanvasOnInitCleanup = () => void;
 export type HtmlInCanvasOnInit = (params: HtmlInCanvasOnPaintParams) => HtmlInCanvasOnInitCleanup | Promise<HtmlInCanvasOnInitCleanup>;
-export type HtmlInCanvasProps = Omit<SequenceProps, 'children' | 'durationInFrames' | keyof LayoutAndStyle> & Omit<AbsoluteFillLayout, 'layout' | 'styleWhilePostmounted' | 'postmountFor' | 'premountFor' | 'styleWhilePremounted'> & {
+export type HtmlInCanvasProps = Omit<SequenceProps, 'children' | 'durationInFrames' | keyof LayoutAndStyle | '_experimentalEffects'> & Omit<AbsoluteFillLayout, 'layout' | 'styleWhilePostmounted' | 'postmountFor' | 'premountFor' | 'styleWhilePremounted'> & {
     readonly durationInFrames?: number;
     readonly width: number;
     readonly height: number;

package/dist/cjs/HtmlInCanvas.js

@@ -1,11 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HtmlInCanvas = exports.isHtmlInCanvasSupported = void 0;
+exports.HtmlInCanvas = exports.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE = exports.isHtmlInCanvasSupported = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const delay_render_js_1 = require("./delay-render.js");
 const run_effect_chain_js_1 = require("./effects/run-effect-chain.js");
 const use_effect_chain_state_js_1 = require("./effects/use-effect-chain-state.js");
+const use_memoized_effects_js_1 = require("./effects/use-memoized-effects.js");
 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 Sequence_js_1 = require("./Sequence.js");
@@ -33,6 +34,8 @@ const isHtmlInCanvasSupported = () => {
     return cachedSupport;
 };
 exports.isHtmlInCanvasSupported = isHtmlInCanvasSupported;
+/** Shown when {@link isHtmlInCanvasSupported} is false: APIs are absent (old Chrome and/or flag off). */
+exports.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE = 'HTML in Canvas is not supported. Two common causes: Chrome is older than version 148 (update Chrome), or the HTML-in-Canvas flag is disabled at chrome://flags/#canvas-draw-element (enable it and restart Chrome).';
 function assertHtmlInCanvasDimensions(width, height) {
     if (typeof width !== 'number' || typeof height !== 'number') {
         throw new Error(`HtmlInCanvas: \`width\` and \`height\` must be numbers. Received width=${String(width)}, height=${String(height)}.`);
@@ -56,11 +59,12 @@ const defaultOnPaint = ({ canvas, element, elementImage, }) => {
 /* eslint-enable react/require-default-props */
 const HtmlInCanvasAncestorContext = (0, react_1.createContext)(false);
 const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, _experimentalEffects: effects = [], children, onPaint, onInit, _experimentalControls: controls, style, durationInFrames, ...sequenceProps }, ref) => {
+    var _a;
     const isInsideAncestorHtmlInCanvas = (0, react_1.useContext)(HtmlInCanvasAncestorContext);
     assertHtmlInCanvasDimensions(width, height);
     const { continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
     if (!(0, exports.isHtmlInCanvasSupported)()) {
-        cancelRender(new Error('HTML in Canvas is not supported. Open this page in Chrome Canary with chrome://flags/#canvas-draw-element enabled.'));
+        cancelRender(new Error(exports.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE));
     }
     const { durationInFrames: videoDuration } = (0, use_video_config_js_1.useVideoConfig)();
     const resolvedDuration = durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : videoDuration;
@@ -79,9 +83,14 @@ const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, _experimenta
     }, [ref]);
     const [offscreenCanvas] = (0, react_1.useState)(() => new OffscreenCanvas(1, 1));
     const chainState = (0, use_effect_chain_state_js_1.useEffectChainState)();
+    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,
+    });
+    const memoizedEffectDefinitions = (0, use_memoized_effects_js_1.useMemoizedEffectDefinitions)(effects);
     // Refs so the paint handler always reads fresh values.
-    const effectsRef = (0, react_1.useRef)(effects);
-    effectsRef.current = effects;
+    const effectsRef = (0, react_1.useRef)(memoizedEffects);
+    effectsRef.current = memoizedEffects;
     const frameRef = (0, react_1.useRef)(frame);
     frameRef.current = frame;
     const onPaintRef = (0, react_1.useRef)(onPaint);
@@ -198,7 +207,7 @@ const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, _experimenta
             return;
         }
         (_a = canvas.requestPaint) === null || _a === void 0 ? void 0 : _a.call(canvas);
-    }, [onPaint]);
+    }, [onPaint, memoizedEffects]);
     (0, react_1.useLayoutEffect)(() => {
         const canvas = canvas2dRef.current;
         if (!canvas) {
@@ -221,7 +230,7 @@ const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, _experimenta
     if (isInsideAncestorHtmlInCanvas) {
         throw new Error('<HtmlInCanvas> effects cannot be nested together. Chrome will only display the outer effect. Consider merging the effects into one if you can.');
     }
-    return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { durationInFrames: resolvedDuration, name: "<HtmlInCanvas>", _experimentalControls: controls, _experimentalEffects: effects, layout: "none", ...sequenceProps, children: (0, jsx_runtime_1.jsx)(HtmlInCanvasAncestorContext.Provider, { value: true, children: (0, jsx_runtime_1.jsx)("canvas", { ref: setLayoutCanvasRef, width: width, height: height, style: style, children: (0, jsx_runtime_1.jsx)("div", { ref: divRef, style: innerStyle, children: children }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { durationInFrames: resolvedDuration, name: "<HtmlInCanvas>", _experimentalControls: controls, _experimentalEffects: memoizedEffectDefinitions, layout: "none", ...sequenceProps, children: (0, jsx_runtime_1.jsx)(HtmlInCanvasAncestorContext.Provider, { value: true, children: (0, jsx_runtime_1.jsx)("canvas", { ref: setLayoutCanvasRef, width: width, height: height, style: style, children: (0, jsx_runtime_1.jsx)("div", { ref: divRef, style: innerStyle, children: children }) }) }) }));
 });
 HtmlInCanvasInner.displayName = 'HtmlInCanvas';
 const HtmlInCanvasWrapped = (0, wrap_in_schema_js_1.wrapInSchema)(HtmlInCanvasInner, sequence_field_schema_js_1.sequenceStyleSchema);

package/dist/cjs/RemotionRoot.d.ts

@@ -8,5 +8,4 @@ export declare const RemotionRootContexts: React.FC<{
     readonly videoEnabled: boolean;
     readonly audioEnabled: boolean;
     readonly frameState: Record<string, number> | null;
-    readonly visualModeEnabled: boolean;
 }>;

package/dist/cjs/RemotionRoot.js

@@ -13,7 +13,7 @@ const SequenceManager_js_1 = require("./SequenceManager.js");
 const TimelineContext_js_1 = require("./TimelineContext.js");
 const use_media_enabled_js_1 = require("./use-media-enabled.js");
 const duration_state_js_1 = require("./video/duration-state.js");
-const RemotionRootContexts = ({ children, numberOfAudioTags, logLevel, audioLatencyHint, videoEnabled, audioEnabled, frameState, visualModeEnabled, }) => {
+const RemotionRootContexts = ({ children, numberOfAudioTags, logLevel, audioLatencyHint, videoEnabled, audioEnabled, frameState, }) => {
     const nonceContext = (0, react_1.useMemo)(() => {
         let counter = 0;
         return {
@@ -23,6 +23,6 @@ const RemotionRootContexts = ({ children, numberOfAudioTags, logLevel, audioLate
     const logging = (0, react_1.useMemo)(() => {
         return { logLevel, mountTime: Date.now() };
     }, [logLevel]);
-    return ((0, jsx_runtime_1.jsx)(log_level_context_js_1.LogLevelContext.Provider, { value: logging, children: (0, jsx_runtime_1.jsx)(nonce_js_1.NonceContext.Provider, { value: nonceContext, children: (0, jsx_runtime_1.jsx)(TimelineContext_js_1.TimelineContextProvider, { frameState: frameState, children: (0, jsx_runtime_1.jsx)(use_media_enabled_js_1.MediaEnabledProvider, { videoEnabled: videoEnabled, audioEnabled: audioEnabled, children: (0, jsx_runtime_1.jsx)(EditorProps_js_1.EditorPropsProvider, { children: (0, jsx_runtime_1.jsx)(prefetch_state_js_1.PrefetchProvider, { children: (0, jsx_runtime_1.jsx)(SequenceManager_js_1.SequenceManagerProvider, { visualModeEnabled: visualModeEnabled, children: (0, jsx_runtime_1.jsx)(duration_state_js_1.DurationsContextProvider, { children: (0, jsx_runtime_1.jsx)(buffering_js_1.BufferingProvider, { children: (0, jsx_runtime_1.jsx)(shared_audio_tags_js_1.SharedAudioContextProvider, { audioLatencyHint: audioLatencyHint, audioEnabled: audioEnabled, children: (0, jsx_runtime_1.jsx)(shared_audio_tags_js_1.SharedAudioTagsContextProvider, { numberOfAudioTags: numberOfAudioTags, children: children }) }) }) }) }) }) }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(log_level_context_js_1.LogLevelContext.Provider, { value: logging, children: (0, jsx_runtime_1.jsx)(nonce_js_1.NonceContext.Provider, { value: nonceContext, children: (0, jsx_runtime_1.jsx)(TimelineContext_js_1.TimelineContextProvider, { frameState: frameState, children: (0, jsx_runtime_1.jsx)(use_media_enabled_js_1.MediaEnabledProvider, { videoEnabled: videoEnabled, audioEnabled: audioEnabled, children: (0, jsx_runtime_1.jsx)(EditorProps_js_1.EditorPropsProvider, { children: (0, jsx_runtime_1.jsx)(prefetch_state_js_1.PrefetchProvider, { children: (0, jsx_runtime_1.jsx)(SequenceManager_js_1.SequenceManagerProvider, { children: (0, jsx_runtime_1.jsx)(duration_state_js_1.DurationsContextProvider, { children: (0, jsx_runtime_1.jsx)(buffering_js_1.BufferingProvider, { children: (0, jsx_runtime_1.jsx)(shared_audio_tags_js_1.SharedAudioContextProvider, { audioLatencyHint: audioLatencyHint, audioEnabled: audioEnabled, children: (0, jsx_runtime_1.jsx)(shared_audio_tags_js_1.SharedAudioTagsContextProvider, { numberOfAudioTags: numberOfAudioTags, children: children }) }) }) }) }) }) }) }) }) }) }));
 };
 exports.RemotionRootContexts = RemotionRootContexts;

package/dist/cjs/Sequence.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { LoopDisplay, SequenceControls } from './CompositionManager.js';
-import type { EffectsProp } from './effects/effect-types.js';
+import type { EffectDefinition } from './effects/effect-types.js';
 import type { BasicMediaInTimelineReturnType } from './use-media-in-timeline.js';
 export type AbsoluteFillLayout = {
     layout?: 'absolute-fill';
@@ -22,7 +22,7 @@ export type SequencePropsWithoutDuration = {
     readonly name?: string;
     readonly showInTimeline?: boolean;
     readonly _experimentalControls?: SequenceControls;
-    readonly _experimentalEffects?: EffectsProp;
+    readonly _experimentalEffects?: readonly EffectDefinition<unknown>[];
     /**
      * @deprecated For internal use only.
      */

package/dist/cjs/Sequence.js

@@ -5,8 +5,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable @typescript-eslint/no-use-before-define */
 const react_1 = require("react");
 const AbsoluteFill_js_1 = require("./AbsoluteFill.js");
-const effect_internals_js_1 = require("./effects/effect-internals.js");
-const use_memoized_effects_js_1 = require("./effects/use-memoized-effects.js");
 const freeze_js_1 = require("./freeze.js");
 const nonce_js_1 = require("./nonce.js");
 const PremountContext_js_1 = require("./PremountContext.js");
@@ -101,7 +99,6 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
     }, [name]);
     const env = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     const inheritedStack = (_a = other === null || other === void 0 ? void 0 : other.stack) !== null && _a !== void 0 ? _a : null;
-    const memoizedEffects = (0, use_memoized_effects_js_1.useMemoizedEffects)((0, effect_internals_js_1.flattenEffects)(_experimentalEffects !== null && _experimentalEffects !== void 0 ? _experimentalEffects : []));
     (0, react_1.useEffect)(() => {
         var _a, _b;
         if (!env.isStudio) {
@@ -111,7 +108,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
             registerSequence({
                 type: isMedia.type,
                 controls: controls !== null && controls !== void 0 ? controls : null,
-                effects: memoizedEffects,
+                effects: _experimentalEffects !== null && _experimentalEffects !== void 0 ? _experimentalEffects : [],
                 displayName: timelineClipName,
                 doesVolumeChange: isMedia.data.doesVolumeChange,
                 duration: actualDurationInFrames,
@@ -149,7 +146,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
             premountDisplay: premountDisplay !== null && premountDisplay !== void 0 ? premountDisplay : null,
             postmountDisplay: postmountDisplay !== null && postmountDisplay !== void 0 ? postmountDisplay : null,
             controls: controls !== null && controls !== void 0 ? controls : null,
-            effects: memoizedEffects,
+            effects: _experimentalEffects !== null && _experimentalEffects !== void 0 ? _experimentalEffects : [],
         });
         return () => {
             unregisterSequence(id);
@@ -174,7 +171,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
         env.isStudio,
         inheritedStack,
         controls,
-        memoizedEffects,
+        _experimentalEffects,
         isMedia,
     ]);
     // Ceil to support floats

package/dist/cjs/SequenceManager.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { TSequence } from './CompositionManager.js';
-import type { CanUpdateSequencePropStatus, CodeValues, GetCodeValues, GetDragOverrides } from './use-schema.js';
+import type { CanUpdateSequencePropStatus, CodeValues, GetDragOverrides, GetEffectDragOverrides } from './use-schema.js';
 export type SequenceManagerContext = {
     registerSequence: (seq: TSequence) => void;
     unregisterSequence: (id: string) => void;
@@ -13,33 +13,54 @@ export type SequenceVisibilityToggleState = {
     setHidden: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
 };
 export declare const SequenceVisibilityToggleContext: React.Context<SequenceVisibilityToggleState>;
-export type VisualModeGetters = {
-    visualModeEnabled: boolean;
+export type VisualModeCodeValues = {
+    codeValues: CodeValues;
+};
+export type VisualModeDragOverrides = {
     getDragOverrides: GetDragOverrides;
-    getCodeValues: GetCodeValues;
-    getIsJsxInMapCallback: (nodePath: SequenceNodePath) => boolean;
+    getEffectDragOverrides: GetEffectDragOverrides;
 };
 export type VisualModeSetters = {
-    setDragOverrides: (nodePath: SequenceNodePath, key: string, value: unknown) => void;
-    clearDragOverrides: (nodePath: SequenceNodePath) => void;
-    setCodeValues: (nodePath: SequenceNodePath, values: CanUpdateSequencePropsResponse) => void;
+    setDragOverrides: (nodePath: SequencePropsSubscriptionKey, key: string, value: unknown) => void;
+    clearDragOverrides: (nodePath: SequencePropsSubscriptionKey) => void;
+    setEffectDragOverrides: (nodePath: SequencePropsSubscriptionKey, effectIndex: number, key: string, value: unknown) => void;
+    clearEffectDragOverrides: (nodePath: SequencePropsSubscriptionKey, effectIndex: number) => void;
+    setCodeValues: (nodePath: SequencePropsSubscriptionKey, values: (prev: CanUpdateSequencePropsResponse) => CanUpdateSequencePropsResponse) => void;
 };
-export type CanUpdateSequencePropsResponse = {
+export type CanUpdateEffectPropsResponseTrue = {
     canUpdate: true;
+    callee: string;
+    effectIndex: number;
     props: Record<string, CanUpdateSequencePropStatus>;
-    nodePath: SequenceNodePath;
-    /** True when the JSX is inside a `.map()` callback (list iteration). */
-    jsxInMapCallback: boolean;
-} | {
+};
+export type CannotUpdateEffectReason = 'not-found' | 'computed' | 'not-call-expression';
+export type CannotUpdateSequenceReason = 'not-found' | 'error';
+export type CanUpdateEffectPropsResponseFalse = {
+    canUpdate: false;
+    effectIndex: number;
+    reason: CannotUpdateEffectReason;
+};
+export type CanUpdateEffectPropsResponse = CanUpdateEffectPropsResponseTrue | CanUpdateEffectPropsResponseFalse;
+export type CanUpdateSequencePropsResponseTrue = {
+    canUpdate: true;
+    props: Record<string, CanUpdateSequencePropStatus>;
+    effects: CanUpdateEffectPropsResponse[];
+};
+export type CanUpdateSequencePropsResponseFalse = {
     canUpdate: false;
-    reason: string;
+    reason: CannotUpdateSequenceReason;
 };
-declare const getCodeValues: (codeValues: CodeValues, nodePath: SequenceNodePath) => Record<string, CanUpdateSequencePropStatus> | undefined;
-export type GetCodeValuesType = typeof getCodeValues;
-export declare const VisualModeGettersContext: React.Context<VisualModeGetters>;
+export type CanUpdateSequencePropsResponse = CanUpdateSequencePropsResponseTrue | CanUpdateSequencePropsResponseFalse;
+export declare const makeSequencePropsSubscriptionKey: (key: SequencePropsSubscriptionKey) => string;
+export declare const VisualModeCodeValuesContext: React.Context<VisualModeCodeValues>;
+export declare const VisualModeDragOverridesContext: React.Context<VisualModeDragOverrides>;
 export declare const VisualModeSettersContext: React.Context<VisualModeSetters>;
+export type SequencePropsSubscriptionKey = {
+    absolutePath: string;
+    nodePath: SequenceNodePath;
+    sequenceKeys: string[];
+    effectKeys: string[][];
+};
 export declare const SequenceManagerProvider: React.FC<{
     readonly children: React.ReactNode;
-    readonly visualModeEnabled: boolean;
 }>;
-export {};

package/dist/cjs/SequenceManager.js

@@ -33,12 +33,9 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SequenceManagerProvider = exports.VisualModeSettersContext = exports.VisualModeGettersContext = exports.SequenceVisibilityToggleContext = exports.SequenceManager = void 0;
+exports.SequenceManagerProvider = exports.VisualModeSettersContext = exports.VisualModeDragOverridesContext = exports.VisualModeCodeValuesContext = exports.makeSequencePropsSubscriptionKey = exports.SequenceVisibilityToggleContext = exports.SequenceManager = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
-const nodePathToString = (nodePath) => {
-    return nodePath.join('.');
-};
 exports.SequenceManager = react_1.default.createContext({
     registerSequence: () => {
         throw new Error('SequenceManagerContext not initialized');
@@ -54,37 +51,20 @@ exports.SequenceVisibilityToggleContext = react_1.default.createContext({
         throw new Error('SequenceVisibilityToggle not initialized');
     },
 });
-const getCodeValues = (codeValues, nodePath) => {
-    const status = codeValues[nodePathToString(nodePath)];
-    if (!status) {
-        return undefined;
-    }
-    if (!status.canUpdate) {
-        return undefined;
-    }
-    return status.props;
-};
-const getIsJsxInMapCallback = (codeValues, nodePath) => {
-    const status = codeValues[nodePathToString(nodePath)];
-    if (!status) {
-        return false;
-    }
-    if (!status.canUpdate) {
-        return false;
-    }
-    return status.jsxInMapCallback;
+const makeSequencePropsSubscriptionKey = (key) => {
+    return `${key.nodePath.join('.')}.${key.sequenceKeys.join('.')}.${key.effectKeys.map((keys) => keys.join('.')).join('.')}`;
 };
-exports.VisualModeGettersContext = react_1.default.createContext({
+exports.makeSequencePropsSubscriptionKey = makeSequencePropsSubscriptionKey;
+exports.VisualModeCodeValuesContext = react_1.default.createContext({
+    codeValues: {},
+});
+exports.VisualModeDragOverridesContext = react_1.default.createContext({
     getDragOverrides: () => {
-        throw new Error('VisualModeGettersContext not initialized');
-    },
-    getCodeValues: () => {
-        throw new Error('VisualModeGettersContext not initialized');
+        throw new Error('VisualModeDragOverridesContext not initialized');
     },
-    getIsJsxInMapCallback: () => {
-        throw new Error('VisualModeGettersContext not initialized');
+    getEffectDragOverrides: () => {
+        throw new Error('VisualModeDragOverridesContext not initialized');
     },
-    visualModeEnabled: false,
 });
 exports.VisualModeSettersContext = react_1.default.createContext({
     setDragOverrides: () => {
@@ -93,29 +73,37 @@ exports.VisualModeSettersContext = react_1.default.createContext({
     clearDragOverrides: () => {
         throw new Error('VisualModeSettersContext not initialized');
     },
+    setEffectDragOverrides: () => {
+        throw new Error('VisualModeSettersContext not initialized');
+    },
+    clearEffectDragOverrides: () => {
+        throw new Error('VisualModeSettersContext not initialized');
+    },
     setCodeValues: () => {
         throw new Error('VisualModeSettersContext not initialized');
     },
 });
-const SequenceManagerProvider = ({ children, visualModeEnabled }) => {
+const effectDragOverridesKey = (nodePath, effectIndex) => `${(0, exports.makeSequencePropsSubscriptionKey)(nodePath)}.effects.${effectIndex}`;
+const SequenceManagerProvider = ({ children }) => {
     const [sequences, setSequences] = (0, react_1.useState)([]);
     const [hidden, setHidden] = (0, react_1.useState)({});
     const [dragOverrides, setControlOverrides] = (0, react_1.useState)({});
     const controlOverridesRef = (0, react_1.useRef)(dragOverrides);
     controlOverridesRef.current = dragOverrides;
+    const [effectDragOverridesState, setEffectDragOverridesState] = (0, react_1.useState)({});
     const [codeValues, setCodeValuesMapState] = (0, react_1.useState)({});
     const setDragOverrides = (0, react_1.useCallback)((nodePath, key, value) => {
         setControlOverrides((prev) => ({
             ...prev,
-            [nodePathToString(nodePath)]: {
-                ...prev[nodePathToString(nodePath)],
+            [(0, exports.makeSequencePropsSubscriptionKey)(nodePath)]: {
+                ...prev[(0, exports.makeSequencePropsSubscriptionKey)(nodePath)],
                 [key]: value,
             },
         }));
     }, []);
     const clearDragOverrides = (0, react_1.useCallback)((nodePath) => {
         setControlOverrides((prev) => {
-            const key = nodePathToString(nodePath);
+            const key = (0, exports.makeSequencePropsSubscriptionKey)(nodePath);
             if (!prev[key]) {
                 return prev;
             }
@@ -124,13 +112,38 @@ const SequenceManagerProvider = ({ children, visualModeEnabled }) => {
             return next;
         });
     }, []);
+    const setEffectDragOverrides = (0, react_1.useCallback)((nodePath, effectIndex, key, value) => {
+        setEffectDragOverridesState((prev) => {
+            const mapKey = effectDragOverridesKey(nodePath, effectIndex);
+            return {
+                ...prev,
+                [mapKey]: {
+                    ...prev[mapKey],
+                    [key]: value,
+                },
+            };
+        });
+    }, []);
+    const clearEffectDragOverrides = (0, react_1.useCallback)((nodePath, effectIndex) => {
+        setEffectDragOverridesState((prev) => {
+            const mapKey = effectDragOverridesKey(nodePath, effectIndex);
+            if (!prev[mapKey]) {
+                return prev;
+            }
+            const next = { ...prev };
+            delete next[mapKey];
+            return next;
+        });
+    }, []);
     const setCodeValues = (0, react_1.useCallback)((nodePath, values) => {
         setCodeValuesMapState((prev) => {
-            const key = nodePathToString(nodePath);
-            if (prev[key] === values) {
+            const key = (0, exports.makeSequencePropsSubscriptionKey)(nodePath);
+            const prevKey = prev[key];
+            const newKey = values(prevKey);
+            if (prevKey === newKey) {
                 return prev;
             }
-            return { ...prev, [key]: values };
+            return { ...prev, [key]: newKey };
         });
     }, []);
     const registerSequence = (0, react_1.useCallback)((seq) => {
@@ -154,21 +167,40 @@ const SequenceManagerProvider = ({ children, visualModeEnabled }) => {
             setHidden,
         };
     }, [hidden]);
-    const gettersContext = (0, react_1.useMemo)(() => {
+    const getDragOverrides = (0, react_1.useCallback)((nodePath) => {
+        var _a;
+        return (_a = dragOverrides[(0, exports.makeSequencePropsSubscriptionKey)(nodePath)]) !== null && _a !== void 0 ? _a : {};
+    }, [dragOverrides]);
+    const getEffectDragOverrides = (0, react_1.useCallback)((nodePath, effectIndex) => {
+        var _a;
+        return ((_a = effectDragOverridesState[effectDragOverridesKey(nodePath, effectIndex)]) !== null && _a !== void 0 ? _a : {});
+    }, [effectDragOverridesState]);
+    const codeValuesContext = (0, react_1.useMemo)(() => {
+        return {
+            codeValues,
+        };
+    }, [codeValues]);
+    const dragOverridesContext = (0, react_1.useMemo)(() => {
         return {
-            visualModeEnabled,
-            getDragOverrides: (nodePath) => { var _a; return (_a = dragOverrides[nodePathToString(nodePath)]) !== null && _a !== void 0 ? _a : {}; },
-            getCodeValues: (nodePath) => getCodeValues(codeValues, nodePath),
-            getIsJsxInMapCallback: (nodePath) => getIsJsxInMapCallback(codeValues, nodePath),
+            getDragOverrides,
+            getEffectDragOverrides,
         };
-    }, [visualModeEnabled, dragOverrides, codeValues]);
+    }, [getDragOverrides, getEffectDragOverrides]);
     const settersContext = (0, react_1.useMemo)(() => {
         return {
             setDragOverrides,
             clearDragOverrides,
+            setEffectDragOverrides,
+            clearEffectDragOverrides,
             setCodeValues,
         };
-    }, [setDragOverrides, clearDragOverrides, setCodeValues]);
-    return ((0, jsx_runtime_1.jsx)(exports.SequenceManager.Provider, { value: sequenceContext, children: (0, jsx_runtime_1.jsx)(exports.SequenceVisibilityToggleContext.Provider, { value: hiddenContext, children: (0, jsx_runtime_1.jsx)(exports.VisualModeGettersContext.Provider, { value: gettersContext, children: (0, jsx_runtime_1.jsx)(exports.VisualModeSettersContext.Provider, { value: settersContext, children: children }) }) }) }));
+    }, [
+        setDragOverrides,
+        clearDragOverrides,
+        setEffectDragOverrides,
+        clearEffectDragOverrides,
+        setCodeValues,
+    ]);
+    return ((0, jsx_runtime_1.jsx)(exports.SequenceManager.Provider, { value: sequenceContext, children: (0, jsx_runtime_1.jsx)(exports.SequenceVisibilityToggleContext.Provider, { value: hiddenContext, children: (0, jsx_runtime_1.jsx)(exports.VisualModeCodeValuesContext.Provider, { value: codeValuesContext, children: (0, jsx_runtime_1.jsx)(exports.VisualModeDragOverridesContext.Provider, { value: dragOverridesContext, children: (0, jsx_runtime_1.jsx)(exports.VisualModeSettersContext.Provider, { value: settersContext, children: children }) }) }) }) }));
 };
 exports.SequenceManagerProvider = SequenceManagerProvider;

package/dist/cjs/bezier.js

@@ -98,16 +98,17 @@ function bezier(mX1, mY1, mX2, mY2) {
         });
     }
     return function (x) {
+        const clampedX = Math.min(1, Math.max(0, x));
         if (mX1 === mY1 && mX2 === mY2) {
-            return x; // linear
+            return clampedX; // linear
         }
         // Because JavaScript number are imprecise, we should guarantee the extremes are right.
-        if (x === 0) {
+        if (clampedX === 0) {
             return 0;
         }
-        if (x === 1) {
+        if (clampedX === 1) {
             return 1;
         }
-        return calcBezier(getTForX(x), mY1, mY2);
+        return calcBezier(getTForX(clampedX), mY1, mY2);
     };
 }

package/dist/cjs/delete-nested-key.d.ts

@@ -0,0 +1 @@
+export declare const deleteNestedKey: (obj: Record<string, unknown>, keysToRemove: Set<string>) => Record<string, unknown>;

package/dist/cjs/delete-nested-key.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deleteNestedKey = void 0;
+const deleteNestedKey = (obj, keysToRemove) => {
+    for (const key of keysToRemove) {
+        const parts = key.split('.');
+        const parents = [obj];
+        let current = obj;
+        for (let i = 0; i < parts.length - 1; i++) {
+            const part = parts[i];
+            const next = current[part];
+            if (next === undefined || next === null) {
+                current = null;
+                break;
+            }
+            current = next;
+            parents.push(current);
+        }
+        if (current === null) {
+            continue;
+        }
+        delete current[parts[parts.length - 1]];
+        for (let i = parents.length - 1; i > 0; i--) {
+            const parent = parents[i];
+            if (Object.keys(parent).length === 0) {
+                const parentKey = parts[i - 1];
+                delete parents[i - 1][parentKey];
+            }
+            else {
+                break;
+            }
+        }
+    }
+    return obj;
+};
+exports.deleteNestedKey = deleteNestedKey;

package/dist/cjs/easing.js

@@ -3,6 +3,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Easing = void 0;
 const bezier_js_1 = require("./bezier.js");
+// Some easing curves are only defined on [0, 1] (e.g. quarter circle, bounce segments).
+// `interpolate(..., { extrapolate: 'extend' })` can pass values outside that interval; clamp
+// there so we return endpoints instead of NaN or unintended extrapolation.
+const clampUnit = (t) => Math.min(1, Math.max(0, t));
 /**
  * @description The Easing module implements common easing functions. You can use it with the interpolate() API.
  * @see [Documentation](https://www.remotion.dev/docs/easing)
@@ -33,7 +37,8 @@ class Easing {
         return 1 - Math.cos((t * Math.PI) / 2);
     }
     static circle(t) {
-        return 1 - Math.sqrt(1 - t * t);
+        const u = clampUnit(t);
+        return 1 - Math.sqrt(1 - u * u);
     }
     static exp(t) {
         return 2 ** (10 * (t - 1));
@@ -46,18 +51,19 @@ class Easing {
         return (t) => t * t * ((s + 1) * t - s);
     }
     static bounce(t) {
-        if (t < 1 / 2.75) {
-            return 7.5625 * t * t;
+        const u = clampUnit(t);
+        if (u < 1 / 2.75) {
+            return 7.5625 * u * u;
         }
-        if (t < 2 / 2.75) {
-            const t2_ = t - 1.5 / 2.75;
+        if (u < 2 / 2.75) {
+            const t2_ = u - 1.5 / 2.75;
             return 7.5625 * t2_ * t2_ + 0.75;
         }
-        if (t < 2.5 / 2.75) {
-            const t2_ = t - 2.25 / 2.75;
+        if (u < 2.5 / 2.75) {
+            const t2_ = u - 2.25 / 2.75;
             return 7.5625 * t2_ * t2_ + 0.9375;
         }
-        const t2 = t - 2.625 / 2.75;
+        const t2 = u - 2.625 / 2.75;
         return 7.5625 * t2 * t2 + 0.984375;
     }
     static bezier(x1, y1, x2, y2) {

package/dist/cjs/effects/Solid.js

@@ -7,10 +7,16 @@ const use_current_frame_js_1 = require("../use-current-frame.js");
 const use_delay_render_js_1 = require("../use-delay-render.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");
 const Solid = ({ color, width, height, _experimentalEffects: experimentalEffects = [], className, style, pixelRatio = 1, }) => {
     const frame = (0, use_current_frame_js_1.useCurrentFrame)();
     const { delayRender, continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
     const [outputCanvas, setOutputCanvas] = (0, react_1.useState)(null);
+    const memoizedEffects = (0, use_memoized_effects_js_1.useMemoizedEffects)({
+        effects: experimentalEffects,
+        // TODO: Add schema to Solid
+        overrideId: null,
+    });
     const sourceCanvas = (0, react_1.useMemo)(() => {
         if (typeof document === 'undefined') {
             return null;
@@ -43,7 +49,7 @@ const Solid = ({ color, width, height, _experimentalEffects: experimentalEffects
         (0, run_effect_chain_js_1.runEffectChain)({
             state: chainState.get(width, height),
             source: sourceCanvas,
-            effects: experimentalEffects,
+            effects: memoizedEffects,
             output: outputCanvas,
             frame,
             width,
@@ -63,7 +69,6 @@ const Solid = ({ color, width, height, _experimentalEffects: experimentalEffects
     }, [
         frame,
         color,
-        experimentalEffects,
         outputCanvas,
         sourceCanvas,
         chainState,
@@ -73,6 +78,7 @@ const Solid = ({ color, width, height, _experimentalEffects: experimentalEffects
         delayRender,
         continueRender,
         cancelRender,
+        memoizedEffects,
     ]);
     return ((0, jsx_runtime_1.jsx)("canvas", { ref: setOutputCanvas, width: width, height: height, className: className, style: style }));
 };

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

@@ -0,0 +1,4 @@
+import type { EffectDefinition, EffectDescriptor } from './effect-types.js';
+type EffectFactory<P> = {} extends P ? (params?: P) => EffectDescriptor<unknown> : (params: P) => EffectDescriptor<unknown>;
+export declare const createEffect: <P, S>(definition: EffectDefinition<P, S>) => EffectFactory<P>;
+export {};