remotion 4.0.452 → 4.0.453

package/dist/cjs/HtmlInCanvas.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import type { EffectsProp } from './canvas-effects/effect-types.js';
+import type { AbsoluteFillLayout, LayoutAndStyle, SequenceProps } from './Sequence.js';
+export type HtmlInCanvasComposeParams = {
+    readonly source: CanvasImageSource;
+    readonly target: HTMLCanvasElement;
+    readonly frame: number;
+    readonly width: number;
+    readonly height: number;
+    readonly pixelRatio: number;
+};
+export declare const isHtmlInCanvasSupported: () => boolean;
+export type HtmlInCanvasProps = Omit<SequenceProps, 'children' | 'durationInFrames' | keyof LayoutAndStyle> & Omit<AbsoluteFillLayout, 'layout'> & {
+    readonly durationInFrames?: number;
+    readonly width: number;
+    readonly height: number;
+    readonly effects?: EffectsProp;
+    readonly children: React.ReactNode;
+    readonly pixelRatio?: number;
+    readonly onCompose?: (params: HtmlInCanvasComposeParams) => void | Promise<void>;
+};
+export declare const HtmlInCanvas: React.ComponentType<Omit<SequenceProps, "children" | "durationInFrames" | "layout"> & Omit<AbsoluteFillLayout, "layout"> & {
+    readonly durationInFrames?: number | undefined;
+    readonly width: number;
+    readonly height: number;
+    readonly effects?: EffectsProp | undefined;
+    readonly children: React.ReactNode;
+    readonly pixelRatio?: number | undefined;
+    readonly onCompose?: ((params: HtmlInCanvasComposeParams) => void | Promise<void>) | undefined;
+}> & {
+    readonly isHtmlInCanvasSupported: () => boolean;
+};

package/dist/cjs/HtmlInCanvas.js

@@ -0,0 +1,172 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HtmlInCanvas = exports.isHtmlInCanvasSupported = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const run_effect_chain_js_1 = require("./canvas-effects/run-effect-chain.js");
+const use_effect_chain_state_js_1 = require("./canvas-effects/use-effect-chain-state.js");
+const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
+const Sequence_js_1 = require("./Sequence.js");
+const use_current_frame_js_1 = require("./use-current-frame.js");
+const use_delay_render_js_1 = require("./use-delay-render.js");
+const use_video_config_js_1 = require("./use-video-config.js");
+const wrap_in_schema_js_1 = require("./wrap-in-schema.js");
+const isHtmlInCanvasSupported = () => {
+    if (typeof document === 'undefined') {
+        return false;
+    }
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    return (typeof (ctx === null || ctx === void 0 ? void 0 : ctx.drawElementImage) === 'function' &&
+        typeof canvas.requestPaint === 'function');
+};
+exports.isHtmlInCanvasSupported = isHtmlInCanvasSupported;
+const htmlInCanvasSchema = {
+    'style.translate': {
+        type: 'translate',
+        step: 1,
+        default: '0px 0px',
+        description: 'Position',
+    },
+    'style.scale': {
+        type: 'number',
+        min: 0.05,
+        max: 100,
+        step: 0.01,
+        default: 1,
+        description: 'Scale',
+    },
+    'style.rotate': {
+        type: 'rotation',
+        step: 1,
+        default: '0deg',
+        description: 'Rotation',
+    },
+    'style.opacity': {
+        type: 'number',
+        min: 0,
+        max: 1,
+        step: 0.01,
+        default: 1,
+        description: 'Opacity',
+    },
+};
+const HtmlInCanvasInner = ({ width, height, effects = [], children, style, pixelRatio = 1, onCompose, controls, durationInFrames, ...sequenceProps }) => {
+    const { durationInFrames: videoDuration } = (0, use_video_config_js_1.useVideoConfig)();
+    const resolvedDuration = durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : videoDuration;
+    const frame = (0, use_current_frame_js_1.useCurrentFrame)();
+    const { delayRender, continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
+    const canvasRef = (0, react_1.useRef)(null);
+    const sceneRef = (0, react_1.useRef)(null);
+    const chainState = (0, use_effect_chain_state_js_1.useEffectChainState)(width, height);
+    // Refs so the paint handler always reads fresh values.
+    const effectsRef = (0, react_1.useRef)(effects);
+    effectsRef.current = effects;
+    const frameRef = (0, react_1.useRef)(frame);
+    frameRef.current = frame;
+    const pixelRatioRef = (0, react_1.useRef)(pixelRatio);
+    pixelRatioRef.current = pixelRatio;
+    const widthRef = (0, react_1.useRef)(width);
+    widthRef.current = width;
+    const heightRef = (0, react_1.useRef)(height);
+    heightRef.current = height;
+    // Track the current delayRender handle so the paint handler can settle it.
+    const pendingHandleRef = (0, react_1.useRef)(null);
+    const onPaint = (0, react_1.useCallback)(() => {
+        const canvas = canvasRef.current;
+        const sceneEl = sceneRef.current;
+        const handle = pendingHandleRef.current;
+        if (!canvas || !sceneEl || !chainState || handle === null) {
+            return;
+        }
+        try {
+            const ctx = canvas.getContext('2d');
+            if (!ctx) {
+                throw new Error('Failed to acquire 2D context for <HtmlInCanvas> canvas');
+            }
+            const w = widthRef.current;
+            const h = heightRef.current;
+            // Layout-subtree children are not shown on-screen until rasterized here;
+            // effects then read from and write back to this same surface (via pool).
+            ctx.reset();
+            ctx.drawElementImage(sceneEl, 0, 0, w, h);
+            const capturedHandle = handle;
+            pendingHandleRef.current = null;
+            (0, run_effect_chain_js_1.runEffectChain)({
+                state: chainState,
+                source: canvas,
+                effects: effectsRef.current,
+                output: canvas,
+                frame: frameRef.current,
+                width: w,
+                height: h,
+                pixelRatio: pixelRatioRef.current,
+            })
+                .then((completed) => {
+                if (completed) {
+                    continueRender(capturedHandle);
+                }
+            })
+                .catch((err) => {
+                cancelRender(err);
+            });
+        }
+        catch (error) {
+            cancelRender(error);
+        }
+    }, [chainState, continueRender, cancelRender]);
+    // Set up layoutSubtree and persistent paint listener.
+    (0, react_1.useEffect)(() => {
+        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.'));
+            return;
+        }
+        const canvas = canvasRef.current;
+        if (!canvas) {
+            return;
+        }
+        canvas.layoutSubtree = true;
+        canvas.addEventListener('paint', onPaint);
+        return () => {
+            canvas.removeEventListener('paint', onPaint);
+        };
+    }, [onPaint, cancelRender]);
+    // On each frame change: block the renderer and request a paint.
+    (0, react_1.useEffect)(() => {
+        const handle = delayRender(`HtmlInCanvas (frame ${frame})`);
+        // Continue a stale handle from a previous frame that never got a paint.
+        if (pendingHandleRef.current !== null) {
+            continueRender(pendingHandleRef.current);
+        }
+        pendingHandleRef.current = handle;
+        const canvas = canvasRef.current;
+        canvas === null || canvas === void 0 ? void 0 : canvas.requestPaint();
+        return () => {
+            if (pendingHandleRef.current === handle) {
+                continueRender(handle);
+                pendingHandleRef.current = null;
+            }
+        };
+    }, [frame, delayRender, continueRender]);
+    const outerStyle = (0, react_1.useMemo)(() => {
+        return {
+            position: 'absolute',
+            inset: 0,
+            width: width + 'px',
+            height: height + 'px',
+        };
+    }, [width, height]);
+    const innerStyle = (0, react_1.useMemo)(() => {
+        return {
+            width,
+            height,
+        };
+    }, [width, height]);
+    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { durationInFrames: resolvedDuration, name: "<HtmlInCanvas>", controls: controls, ...sequenceProps, style: style, children: jsx_runtime_1.jsx("canvas", { ref: canvasRef, width: width, height: height, style: outerStyle, children: jsx_runtime_1.jsx("div", { ref: sceneRef, style: innerStyle, children: children }) }) }));
+};
+const HtmlInCanvasWrapped = (0, wrap_in_schema_js_1.wrapInSchema)(HtmlInCanvasInner, htmlInCanvasSchema);
+exports.HtmlInCanvas = Object.assign(HtmlInCanvasWrapped, {
+    isHtmlInCanvasSupported: exports.isHtmlInCanvasSupported,
+});
+exports.HtmlInCanvas.displayName = 'HtmlInCanvas';
+(0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(exports.HtmlInCanvas);

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

@@ -3,16 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Solid = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const use_effect_chain_js_1 = require("./use-effect-chain.js");
-// `<Solid>` is the simplest source component: it produces a flat-color image
-// to feed into the canvas-effect chain. Combined with an effect chain it can
-// generate procedural content (gradients, blurs, noise patches, ...) without
-// needing to mount a DOM source.
-//
-// Internally the source is a 1x1 canvas filled with `color`; the chain runtime
-// scales it to the chain's `width`/`height` when the next stage samples it,
-// which is correct because every pixel is the same color.
-const Solid = ({ color, width, height, effects = [], className, style, pixelRatio, }) => {
+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 Solid = ({ color, width, height, effects = [], 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 sourceCanvas = (0, react_1.useMemo)(() => {
         if (typeof document === 'undefined') {
@@ -23,27 +20,55 @@ const Solid = ({ color, width, height, effects = [], className, style, pixelRati
         canvas.height = 1;
         return canvas;
     }, []);
-    const source = (0, react_1.useCallback)(() => {
-        if (!sourceCanvas) {
-            return null;
+    const chainState = (0, use_effect_chain_state_js_1.useEffectChainState)(width, height);
+    // Fill source and run effect chain on every frame / color change.
+    (0, react_1.useEffect)(() => {
+        if (!outputCanvas || !sourceCanvas || !chainState) {
+            return;
         }
+        const handle = delayRender(`Solid effect chain (frame ${frame})`);
         const ctx = sourceCanvas.getContext('2d', { colorSpace: 'srgb' });
         if (!ctx) {
-            throw new Error('Failed to acquire 2D context for <Solid> source');
+            cancelRender(new Error('Failed to acquire 2D context for <Solid> source'));
+            return;
         }
         ctx.fillStyle = color;
         ctx.fillRect(0, 0, 1, 1);
-        return sourceCanvas;
-    }, [color, sourceCanvas]);
-    (0, use_effect_chain_js_1.useEffectChain)({
-        source,
+        (0, run_effect_chain_js_1.runEffectChain)({
+            state: chainState,
+            source: sourceCanvas,
+            effects,
+            output: outputCanvas,
+            frame,
+            width,
+            height,
+            pixelRatio,
+        })
+            .then((completed) => {
+            if (completed) {
+                continueRender(handle);
+            }
+        })
+            .catch((err) => {
+            cancelRender(err);
+        });
+        return () => {
+            continueRender(handle);
+        };
+    }, [
+        frame,
+        color,
         effects,
+        outputCanvas,
+        sourceCanvas,
+        chainState,
         width,
         height,
         pixelRatio,
-        output: outputCanvas,
-        sourceDeps: [color],
-    });
+        delayRender,
+        continueRender,
+        cancelRender,
+    ]);
     return (jsx_runtime_1.jsx("canvas", { ref: setOutputCanvas, width: width, height: height, className: className, style: style }));
 };
 exports.Solid = Solid;

package/dist/cjs/canvas-effects/canvas-pool.d.ts

@@ -4,8 +4,10 @@ export declare class CanvasPool {
     private readonly width;
     private readonly height;
     private readonly pairs;
+    private readonly lostContexts;
     constructor(width: number, height: number);
     getPair(backend: Backend): CanvasPair;
+    assertContextNotLost(canvas: HTMLCanvasElement): void;
     private allocateCanvas;
 }
 export {};

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

@@ -12,6 +12,7 @@ class CanvasPool {
     width;
     height;
     pairs = new Map();
+    lostContexts = new Set();
     constructor(width, height) {
         this.width = width;
         this.height = height;
@@ -28,6 +29,13 @@ class CanvasPool {
         this.pairs.set(backend, pair);
         return pair;
     }
+    assertContextNotLost(canvas) {
+        if (this.lostContexts.has(canvas)) {
+            throw new Error('WebGL context was lost during canvas effect rendering. ' +
+                'This typically happens in headless or memory-constrained environments (e.g. Remotion Lambda). ' +
+                'Try reducing concurrency or increasing the Lambda function memory.');
+        }
+    }
     allocateCanvas(backend) {
         const canvas = document.createElement('canvas');
         canvas.width = this.width;
@@ -51,6 +59,13 @@ class CanvasPool {
                 if (!ctx) {
                     throw new Error('Failed to acquire WebGL2 context for canvas effect');
                 }
+                canvas.addEventListener('webglcontextlost', (e) => {
+                    e.preventDefault();
+                    this.lostContexts.add(canvas);
+                });
+                canvas.addEventListener('webglcontextrestored', () => {
+                    this.lostContexts.delete(canvas);
+                });
                 ctx.pixelStorei(ctx.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
                 return canvas;
             }

package/dist/cjs/canvas-effects/define-effect.js

@@ -14,8 +14,11 @@ exports.defineEffect = defineEffect;
 // erased to `unknown` in the descriptor because consumers (the chain runtime,
 // other effects in the chain) treat state as opaque; only the definition's
 // own `setup`, `apply`, and `cleanup` functions ever see the real shape.
-const createDescriptor = (definition, params) => ({
-    definition: definition,
-    params,
-});
+const createDescriptor = (definition, params) => {
+    return {
+        definition: definition,
+        params,
+        stack: new Error().stack,
+    };
+};
 exports.createDescriptor = createDescriptor;

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

@@ -1,3 +1,4 @@
+import type { SequenceSchema } from '../internals';
 export type Backend = '2d' | 'webgl2' | 'webgpu';
 type AnyGpuDevice = unknown;
 export type EffectApplyParams<P, S> = {
@@ -13,13 +14,18 @@ export type EffectApplyParams<P, S> = {
 };
 export type EffectDefinition<P, S = unknown> = {
     readonly type: string;
+    readonly label: string;
     readonly backend: Backend;
     readonly setup: (target: HTMLCanvasElement) => S | Promise<S>;
     readonly apply: (params: EffectApplyParams<P, S>) => void | Promise<void>;
-    readonly cleanup?: (state: S) => void;
+    readonly cleanup: (state: S) => void;
+    readonly schema: SequenceSchema | null;
 };
-export type EffectDescriptor<P = unknown> = {
+export type EffectDefinitionAndStack<P = unknown> = {
     readonly definition: EffectDefinition<P, unknown>;
+    readonly stack: string;
+};
+export type EffectDescriptor<P = unknown> = EffectDefinitionAndStack<P> & {
     readonly params: P;
 };
 export type EffectsProp = ReadonlyArray<EffectDescriptor<any> | ReadonlyArray<EffectDescriptor<any>>>;

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

@@ -1,6 +1,4 @@
 export { createDescriptor, defineEffect } from './define-effect.js';
-export type { Backend, EffectApplyParams, EffectDefinition, EffectDescriptor, EffectsProp, } from './effect-types.js';
-export { HtmlInCanvas } from './HtmlInCanvas.js';
-export type { HtmlInCanvasProps } from './HtmlInCanvas.js';
+export type { Backend, EffectApplyParams, EffectDefinition, EffectDefinitionAndStack, EffectDescriptor, EffectsProp, } from './effect-types.js';
 export { Solid } from './Solid.js';
 export type { SolidProps } from './Solid.js';

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

@@ -1,10 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Solid = exports.HtmlInCanvas = exports.defineEffect = exports.createDescriptor = void 0;
+exports.Solid = exports.defineEffect = exports.createDescriptor = void 0;
 const define_effect_js_1 = require("./define-effect.js");
 Object.defineProperty(exports, "createDescriptor", { enumerable: true, get: function () { return define_effect_js_1.createDescriptor; } });
 Object.defineProperty(exports, "defineEffect", { enumerable: true, get: function () { return define_effect_js_1.defineEffect; } });
-const HtmlInCanvas_js_1 = require("./HtmlInCanvas.js");
-Object.defineProperty(exports, "HtmlInCanvas", { enumerable: true, get: function () { return HtmlInCanvas_js_1.HtmlInCanvas; } });
 const Solid_js_1 = require("./Solid.js");
 Object.defineProperty(exports, "Solid", { enumerable: true, get: function () { return Solid_js_1.Solid; } });

package/dist/cjs/canvas-effects/run-effect-chain.d.ts

@@ -0,0 +1,24 @@
+import { CanvasPool } from './canvas-pool.js';
+import type { EffectDefinition, EffectsProp } from './effect-types.js';
+export type EffectChainState = {
+    pool: CanvasPool;
+    setupCache: WeakMap<EffectDefinition<unknown, unknown>, Promise<unknown>>;
+    cleanupRegistry: Array<{
+        definition: EffectDefinition<unknown, unknown>;
+        statePromise: Promise<unknown>;
+    }>;
+    currentRunId: number;
+};
+export declare const createEffectChainState: (width: number, height: number) => EffectChainState;
+export declare const cleanupEffectChainState: (state: EffectChainState) => void;
+export type RunEffectChainOptions = {
+    readonly state: EffectChainState;
+    readonly source: CanvasImageSource;
+    readonly effects: EffectsProp;
+    readonly output: HTMLCanvasElement;
+    readonly frame: number;
+    readonly width: number;
+    readonly height: number;
+    readonly pixelRatio: number;
+};
+export declare const runEffectChain: ({ state, source, effects, output, frame, width, height, pixelRatio, }: RunEffectChainOptions) => Promise<boolean>;

package/dist/cjs/canvas-effects/run-effect-chain.js

@@ -0,0 +1,123 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.runEffectChain = exports.cleanupEffectChainState = exports.createEffectChainState = void 0;
+const canvas_pool_js_1 = require("./canvas-pool.js");
+const effect_internals_js_1 = require("./effect-internals.js");
+const gpu_device_js_1 = require("./gpu-device.js");
+const createEffectChainState = (width, height) => ({
+    pool: new canvas_pool_js_1.CanvasPool(width, height),
+    setupCache: new WeakMap(),
+    cleanupRegistry: [],
+    currentRunId: 0,
+});
+exports.createEffectChainState = createEffectChainState;
+const cleanupEffectChainState = (state) => {
+    state.currentRunId++;
+    for (const entry of state.cleanupRegistry) {
+        entry.statePromise.then((s) => {
+            var _a, _b;
+            return (_b = (_a = entry.definition).cleanup) === null || _b === void 0 ? void 0 : _b.call(_a, s);
+        }, () => undefined);
+    }
+};
+exports.cleanupEffectChainState = cleanupEffectChainState;
+const ensureSetup = (state, def, target) => {
+    const cached = state.setupCache.get(def);
+    if (cached) {
+        return cached;
+    }
+    const promise = Promise.resolve(def.setup(target));
+    state.setupCache.set(def, promise);
+    state.cleanupRegistry.push({ definition: def, statePromise: promise });
+    return promise;
+};
+// Runs the effect pipeline imperatively. Returns `true` if the pipeline
+// completed and wrote to `output`, `false` if it was superseded by a newer
+// run (caller should not act on a stale result).
+const runEffectChain = async ({ state, source, effects, output, frame, width, height, pixelRatio, }) => {
+    var _a;
+    var _b;
+    const runId = ++state.currentRunId;
+    const isCancelled = () => state.currentRunId !== runId;
+    const flattened = (0, effect_internals_js_1.flattenEffects)(effects);
+    const runs = (0, effect_internals_js_1.groupByBackend)(flattened);
+    let currentImage = source;
+    let lastTarget = null;
+    if (runs.length === 0) {
+        // In-place pipeline (e.g. <HtmlInCanvas>: drawElementImage into the same
+        // surface, no further effects) — the bitmap is already on `output`.
+        if (source === output) {
+            return true;
+        }
+        const ctx = output.getContext('2d');
+        if (!ctx) {
+            throw new Error('Failed to acquire 2D context for output canvas');
+        }
+        ctx.clearRect(0, 0, width, height);
+        ctx.drawImage(currentImage, 0, 0, width, height);
+        return true;
+    }
+    let needsGpuDevice = false;
+    for (const run of runs) {
+        if (run.backend === 'webgpu') {
+            needsGpuDevice = true;
+            break;
+        }
+    }
+    const gpuDevice = needsGpuDevice ? await (0, gpu_device_js_1.getGpuDevice)() : null;
+    if (isCancelled()) {
+        return false;
+    }
+    for (let runIndex = 0; runIndex < runs.length; runIndex++) {
+        const run = runs[runIndex];
+        const [a, b] = state.pool.getPair(run.backend);
+        let dst = a;
+        for (const eff of run.effects) {
+            const def = eff.definition;
+            const setupState = await ensureSetup(state, def, dst);
+            if (isCancelled()) {
+                return false;
+            }
+            await def.apply({
+                source: currentImage,
+                target: dst,
+                state: setupState,
+                params: eff.params,
+                frame,
+                width,
+                height,
+                pixelRatio,
+                gpuDevice,
+            });
+            if (isCancelled()) {
+                return false;
+            }
+            if (run.backend === 'webgl2') {
+                state.pool.assertContextNotLost(dst);
+            }
+            currentImage = dst;
+            dst = dst === a ? b : a;
+        }
+        lastTarget = (_b = currentImage) !== null && _b !== void 0 ? _b : lastTarget;
+        const nextRun = runs[runIndex + 1];
+        if (nextRun && nextRun.backend !== run.backend && lastTarget) {
+            const bitmap = await createImageBitmap(lastTarget);
+            if (isCancelled()) {
+                (_a = bitmap.close) === null || _a === void 0 ? void 0 : _a.call(bitmap);
+                return false;
+            }
+            currentImage = bitmap;
+        }
+    }
+    if (!lastTarget) {
+        return true;
+    }
+    const outCtx = output.getContext('2d');
+    if (!outCtx) {
+        throw new Error('Failed to acquire 2D context for output canvas');
+    }
+    outCtx.clearRect(0, 0, width, height);
+    outCtx.drawImage(lastTarget, 0, 0, width, height);
+    return true;
+};
+exports.runEffectChain = runEffectChain;

package/dist/cjs/canvas-effects/use-effect-chain-state.d.ts

@@ -0,0 +1,2 @@
+import type { EffectChainState } from './run-effect-chain.js';
+export declare const useEffectChainState: (width: number, height: number) => EffectChainState | null;

package/dist/cjs/canvas-effects/use-effect-chain-state.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useEffectChainState = void 0;
+const react_1 = require("react");
+const run_effect_chain_js_1 = require("./run-effect-chain.js");
+const useEffectChainState = (width, height) => {
+    const chainStateRef = (0, react_1.useRef)(null);
+    const sizeRef = (0, react_1.useRef)(null);
+    if (!sizeRef.current ||
+        sizeRef.current.width !== width ||
+        sizeRef.current.height !== height) {
+        if (chainStateRef.current) {
+            (0, run_effect_chain_js_1.cleanupEffectChainState)(chainStateRef.current);
+        }
+        chainStateRef.current = (0, run_effect_chain_js_1.createEffectChainState)(width, height);
+        sizeRef.current = { width, height };
+    }
+    (0, react_1.useEffect)(() => {
+        return () => {
+            if (chainStateRef.current) {
+                (0, run_effect_chain_js_1.cleanupEffectChainState)(chainStateRef.current);
+            }
+        };
+    }, []);
+    return chainStateRef.current;
+};
+exports.useEffectChainState = useEffectChainState;

package/dist/cjs/canvas-effects/use-memoized-effects.d.ts

@@ -0,0 +1,2 @@
+import type { EffectDefinitionAndStack, EffectDescriptor } from './effect-types.js';
+export declare const useMemoizedEffects: (effects: EffectDescriptor<unknown>[]) => EffectDefinitionAndStack<unknown>[];

package/dist/cjs/canvas-effects/use-memoized-effects.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMemoizedEffects = void 0;
+const react_1 = require("react");
+const useMemoizedEffects = (effects) => {
+    const previousRef = (0, react_1.useRef)(null);
+    const previous = previousRef.current;
+    const isSame = previous !== null &&
+        previous.length === effects.length &&
+        previous.every((p, i) => p.definition === effects[i].definition && p.stack === effects[i].stack);
+    if (isSame) {
+        return previous;
+    }
+    const next = effects.map((e) => ({
+        definition: e.definition,
+        stack: e.stack,
+    }));
+    previousRef.current = next;
+    return next;
+};
+exports.useMemoizedEffects = useMemoizedEffects;

package/dist/cjs/enable-effects.d.ts

@@ -0,0 +1 @@
+export declare const ENABLE_EFFECTS = true;

package/dist/cjs/enable-effects.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ENABLE_EFFECTS = void 0;
+exports.ENABLE_EFFECTS = true;

package/dist/cjs/version.d.ts

@@ -3,4 +3,4 @@
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-export declare const VERSION = "4.0.452";
+export declare const VERSION = "4.0.453";

package/dist/cjs/version.js

@@ -7,4 +7,4 @@ exports.VERSION = void 0;
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-exports.VERSION = '4.0.452';
+exports.VERSION = '4.0.453';

package/dist/esm/index.mjs

@@ -1238,7 +1238,7 @@ var addSequenceStackTraces = (component) => {
 };
 
 // src/version.ts
-var VERSION = "4.0.452";
+var VERSION = "4.0.453";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {

package/dist/esm/version.mjs

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "4.0.452";
+var VERSION = "4.0.453";
 export {
   VERSION
 };

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/core"
 	},
 	"name": "remotion",
-	"version": "4.0.452",
+	"version": "4.0.453",
 	"description": "Make videos programmatically",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
@@ -35,7 +35,7 @@
 		"react-dom": "19.2.3",
 		"webpack": "5.105.0",
 		"zod": "4.3.6",
-		"@remotion/eslint-config-internal": "4.0.452",
+		"@remotion/eslint-config-internal": "4.0.453",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},

package/dist/cjs/canvas-effects/HtmlInCanvas.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-import type { EffectsProp } from './effect-types.js';
-export type HtmlInCanvasProps = {
-    readonly width: number;
-    readonly height: number;
-    readonly effects?: EffectsProp;
-    readonly children: React.ReactNode;
-    readonly className?: string;
-    readonly style?: React.CSSProperties;
-    readonly pixelRatio?: number;
-};
-export declare const HtmlInCanvas: React.FC<HtmlInCanvasProps>;

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

@@ -1,91 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HtmlInCanvas = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const cancel_render_js_1 = require("../cancel-render.js");
-const use_effect_chain_js_1 = require("./use-effect-chain.js");
-const isHtmlInCanvasSupported = () => {
-    if (typeof document === 'undefined') {
-        return false;
-    }
-    const canvas = document.createElement('canvas');
-    const ctx = canvas.getContext('2d');
-    return (typeof (ctx === null || ctx === void 0 ? void 0 : ctx.drawElementImage) === 'function' &&
-        typeof canvas.requestPaint === 'function');
-};
-// `<HtmlInCanvas>` rasterizes its DOM children into a canvas using the WICG
-// html-in-canvas proposal, then runs the resulting image through an
-// effect chain. The captured DOM image is the source for the chain; effects
-// then transform it just like with any other source component.
-//
-// Requires Chrome Canary with `chrome://flags/#canvas-draw-element` enabled.
-const HtmlInCanvas = ({ width, height, effects = [], children, className, style, pixelRatio, }) => {
-    const sourceCanvasRef = (0, react_1.useRef)(null);
-    const sceneRef = (0, react_1.useRef)(null);
-    const [outputCanvas, setOutputCanvas] = (0, react_1.useState)(null);
-    (0, react_1.useEffect)(() => {
-        if (!isHtmlInCanvasSupported()) {
-            (0, cancel_render_js_1.cancelRender)(new Error('HTML in Canvas is not supported. Open this page in Chrome Canary with chrome://flags/#canvas-draw-element enabled.'));
-            return;
-        }
-        const sourceCanvas = sourceCanvasRef.current;
-        if (!sourceCanvas) {
-            return;
-        }
-        sourceCanvas.layoutSubtree = true;
-    }, []);
-    const source = (0, react_1.useCallback)(() => {
-        const sourceCanvas = sourceCanvasRef.current;
-        const sceneEl = sceneRef.current;
-        if (!sourceCanvas || !sceneEl) {
-            return null;
-        }
-        const ctx = sourceCanvas.getContext('2d');
-        if (!ctx) {
-            throw new Error('Failed to acquire 2D context for <HtmlInCanvas> source');
-        }
-        return new Promise((resolve, reject) => {
-            const onPaint = () => {
-                sourceCanvas.removeEventListener('paint', onPaint);
-                try {
-                    ctx.reset();
-                    ctx.drawElementImage(sceneEl, 0, 0, width, height);
-                    resolve(sourceCanvas);
-                }
-                catch (err) {
-                    reject(err instanceof Error ? err : new Error(String(err)));
-                }
-            };
-            sourceCanvas.addEventListener('paint', onPaint);
-            sourceCanvas.requestPaint();
-        });
-    }, [width, height]);
-    (0, use_effect_chain_js_1.useEffectChain)({
-        source,
-        effects,
-        width,
-        height,
-        pixelRatio,
-        output: outputCanvas,
-        sourceDeps: [],
-    });
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("canvas", { ref: sourceCanvasRef, width: width, height: height, style: {
-                    position: 'absolute',
-                    inset: 0,
-                    width,
-                    height,
-                }, children: jsx_runtime_1.jsx("div", { ref: sceneRef, style: {
-                        width,
-                        height,
-                    }, children: children }) }), jsx_runtime_1.jsx("canvas", { ref: setOutputCanvas, width: width, height: height, className: className, style: {
-                    position: 'absolute',
-                    inset: 0,
-                    width,
-                    height,
-                    ...style,
-                } })
-        ] }));
-};
-exports.HtmlInCanvas = HtmlInCanvas;

package/dist/cjs/canvas-effects/use-effect-chain.d.ts

@@ -1,13 +0,0 @@
-import type { EffectsProp } from './effect-types.js';
-type SourceFn = () => CanvasImageSource | Promise<CanvasImageSource> | null | undefined;
-export type UseEffectChainOptions = {
-    readonly source: SourceFn;
-    readonly effects: EffectsProp;
-    readonly width: number;
-    readonly height: number;
-    readonly pixelRatio?: number;
-    readonly output: HTMLCanvasElement | null;
-    readonly sourceDeps: ReadonlyArray<unknown>;
-};
-export declare const useEffectChain: ({ source, effects, width, height, pixelRatio, output, sourceDeps, }: UseEffectChainOptions) => void;
-export {};

package/dist/cjs/canvas-effects/use-effect-chain.js

@@ -1,197 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useEffectChain = void 0;
-const react_1 = require("react");
-const use_current_frame_js_1 = require("../use-current-frame.js");
-const use_delay_render_js_1 = require("../use-delay-render.js");
-const canvas_pool_js_1 = require("./canvas-pool.js");
-const effect_internals_js_1 = require("./effect-internals.js");
-const gpu_device_js_1 = require("./gpu-device.js");
-const ensureSetup = (state, def, target) => {
-    const cached = state.setupCache.get(def);
-    if (cached) {
-        return cached;
-    }
-    const promise = Promise.resolve(def.setup(target));
-    state.setupCache.set(def, promise);
-    state.cleanupRegistry.push({ definition: def, statePromise: promise });
-    return promise;
-};
-// `useEffectChain` is the shared per-frame runtime that powers source
-// components like `<Solid>` and `<HtmlInCanvas>`. Source components are
-// responsible for producing a `CanvasImageSource` via the `source` callback;
-// the runtime owns the rest of the pipeline (scratch canvases, ping-pong,
-// cross-backend transfer via `createImageBitmap`, single `delayRender` per
-// frame).
-const useEffectChain = ({ source, effects, width, height, pixelRatio = 1, output, sourceDeps, }) => {
-    const frame = (0, use_current_frame_js_1.useCurrentFrame)();
-    const { delayRender, continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
-    const stateRef = (0, react_1.useRef)(null);
-    const sizeRef = (0, react_1.useRef)(null);
-    // Reset pool if dimensions changed.
-    if (!sizeRef.current ||
-        sizeRef.current.width !== width ||
-        sizeRef.current.height !== height) {
-        stateRef.current = {
-            pool: new canvas_pool_js_1.CanvasPool(width, height),
-            setupCache: new WeakMap(),
-            cleanupRegistry: [],
-        };
-        sizeRef.current = { width, height };
-    }
-    const flattened = (0, react_1.useMemo)(() => (0, effect_internals_js_1.flattenEffects)(effects), [effects]);
-    const runs = (0, react_1.useMemo)(() => (0, effect_internals_js_1.groupByBackend)(flattened), [flattened]);
-    (0, react_1.useEffect)(() => {
-        const state = stateRef.current;
-        if (!state || !output) {
-            return;
-        }
-        const handle = delayRender(`Canvas effect chain (frame ${frame})`);
-        let cancelled = false;
-        let resolved = false;
-        const finish = () => {
-            if (resolved) {
-                return;
-            }
-            resolved = true;
-            continueRender(handle);
-        };
-        const fail = (err) => {
-            if (resolved) {
-                return;
-            }
-            resolved = true;
-            cancelRender(err);
-        };
-        (async () => {
-            var _a;
-            var _b;
-            try {
-                const sourceImage = await source();
-                if (cancelled) {
-                    return;
-                }
-                if (!sourceImage) {
-                    finish();
-                    return;
-                }
-                let currentImage = sourceImage;
-                let lastTarget = null;
-                if (runs.length === 0) {
-                    // No effects: blit source directly into output.
-                    const ctx = output.getContext('2d');
-                    if (!ctx) {
-                        throw new Error('Failed to acquire 2D context for output canvas');
-                    }
-                    ctx.clearRect(0, 0, width, height);
-                    ctx.drawImage(currentImage, 0, 0, width, height);
-                    finish();
-                    return;
-                }
-                let needsGpuDevice = false;
-                for (const run of runs) {
-                    if (run.backend === 'webgpu') {
-                        needsGpuDevice = true;
-                        break;
-                    }
-                }
-                const gpuDevice = needsGpuDevice ? await (0, gpu_device_js_1.getGpuDevice)() : null;
-                if (cancelled) {
-                    return;
-                }
-                for (let runIndex = 0; runIndex < runs.length; runIndex++) {
-                    const run = runs[runIndex];
-                    const [a, b] = state.pool.getPair(run.backend);
-                    let dst = a;
-                    for (const eff of run.effects) {
-                        const def = eff.definition;
-                        const setupState = await ensureSetup(state, def, dst);
-                        if (cancelled) {
-                            return;
-                        }
-                        await def.apply({
-                            source: currentImage,
-                            target: dst,
-                            state: setupState,
-                            params: eff.params,
-                            frame,
-                            width,
-                            height,
-                            pixelRatio,
-                            gpuDevice,
-                        });
-                        if (cancelled) {
-                            return;
-                        }
-                        currentImage = dst;
-                        dst = dst === a ? b : a;
-                    }
-                    lastTarget = (_b = currentImage) !== null && _b !== void 0 ? _b : lastTarget;
-                    // If another run follows with a different backend, transfer via
-                    // `createImageBitmap` so the next backend can sample from a
-                    // neutral GPU-resident handle.
-                    const nextRun = runs[runIndex + 1];
-                    if (nextRun && nextRun.backend !== run.backend && lastTarget) {
-                        const bitmap = await createImageBitmap(lastTarget);
-                        if (cancelled) {
-                            (_a = bitmap.close) === null || _a === void 0 ? void 0 : _a.call(bitmap);
-                            return;
-                        }
-                        currentImage = bitmap;
-                    }
-                }
-                if (!lastTarget) {
-                    finish();
-                    return;
-                }
-                const outCtx = output.getContext('2d');
-                if (!outCtx) {
-                    throw new Error('Failed to acquire 2D context for output canvas');
-                }
-                outCtx.clearRect(0, 0, width, height);
-                outCtx.drawImage(lastTarget, 0, 0, width, height);
-                finish();
-            }
-            catch (err) {
-                if (!cancelled) {
-                    fail(err);
-                }
-            }
-        })();
-        return () => {
-            cancelled = true;
-            if (!resolved) {
-                continueRender(handle);
-            }
-        };
-        /* eslint-disable react-hooks/exhaustive-deps */
-    }, [
-        frame,
-        width,
-        height,
-        pixelRatio,
-        output,
-        runs,
-        delayRender,
-        continueRender,
-        cancelRender,
-        ...sourceDeps,
-    ]);
-    /* eslint-enable react-hooks/exhaustive-deps */
-    // Cleanup on unmount: invoke `cleanup` for every cached state.
-    (0, react_1.useEffect)(() => {
-        return () => {
-            const state = stateRef.current;
-            if (!state) {
-                return;
-            }
-            for (const entry of state.cleanupRegistry) {
-                entry.statePromise.then((s) => {
-                    var _a, _b;
-                    return (_b = (_a = entry.definition).cleanup) === null || _b === void 0 ? void 0 : _b.call(_a, s);
-                }, () => undefined);
-            }
-        };
-    }, []);
-};
-exports.useEffectChain = useEffectChain;

package/dist/cjs/sequence-timing-schema.d.ts

@@ -1,19 +0,0 @@
-/**
- * Visual-mode fields for clip timing. Used by `<Sequence>` and merged into media schemas (e.g. `@remotion/media` `<Video>`).
- */
-export declare const SEQUENCE_TIMING_SCHEMA: {
-    readonly from: {
-        readonly type: "number";
-        readonly min: 0;
-        readonly step: 1;
-        readonly default: 0;
-        readonly description: "From";
-    };
-    readonly durationInFrames: {
-        readonly type: "number";
-        readonly min: 0.01;
-        readonly step: 0.01;
-        readonly default: undefined;
-        readonly description: "Duration in frames";
-    };
-};

package/dist/cjs/sequence-timing-schema.js

@@ -1,22 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SEQUENCE_TIMING_SCHEMA = void 0;
-/**
- * Visual-mode fields for clip timing. Used by `<Sequence>` and merged into media schemas (e.g. `@remotion/media` `<Video>`).
- */
-exports.SEQUENCE_TIMING_SCHEMA = {
-    from: {
-        type: 'number',
-        min: 0,
-        step: 1,
-        default: 0,
-        description: 'From',
-    },
-    durationInFrames: {
-        type: 'number',
-        min: 0.01,
-        step: 0.01,
-        default: undefined,
-        description: 'Duration in frames',
-    },
-};