remotion 4.0.456 → 4.0.457

package/dist/cjs/HtmlInCanvas.d.ts

@@ -55,5 +55,5 @@ export type HtmlInCanvasProps = Omit<SequenceProps, 'children' | 'durationInFram
     readonly onInit?: HtmlInCanvasOnInit;
 };
 export declare const HtmlInCanvas: React.ForwardRefExoticComponent<HtmlInCanvasProps & React.RefAttributes<HTMLCanvasElement>> & {
-    readonly isHtmlInCanvasSupported: typeof isHtmlInCanvasSupported;
+    readonly isSupported: typeof isHtmlInCanvasSupported;
 };

package/dist/cjs/HtmlInCanvas.js

@@ -53,6 +53,7 @@ const defaultOnPaint = ({ canvas, element, elementImage, }) => {
     element.style.transform = transform.toString();
 };
 /* eslint-enable react/require-default-props */
+const HtmlInCanvasAncestorContext = (0, react_1.createContext)(false);
 const htmlInCanvasSchema = {
     'style.translate': {
         type: 'translate',
@@ -84,6 +85,7 @@ const htmlInCanvasSchema = {
     },
 };
 const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, _experimentalEffects: experimentalEffects = [], children, onPaint, onInit, _experimentalControls: controls, style, durationInFrames, ...sequenceProps }, ref) => {
+    const isInsideAncestorHtmlInCanvas = (0, react_1.useContext)(HtmlInCanvasAncestorContext);
     assertHtmlInCanvasDimensions(width, height);
     const { continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
     if (!(0, exports.isHtmlInCanvasSupported)()) {
@@ -246,12 +248,15 @@ const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, _experimenta
             ...style,
         };
     }, [width, height, style]);
-    return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { durationInFrames: resolvedDuration, name: "<HtmlInCanvas>", _experimentalControls: controls, layout: "none", ...sequenceProps, children: (0, jsx_runtime_1.jsx)("canvas", { ref: setLayoutCanvasRef, width: width, height: height, children: (0, jsx_runtime_1.jsx)("div", { ref: divRef, style: innerStyle, children: children }) }) }));
+    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, 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, 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, htmlInCanvasSchema);
 exports.HtmlInCanvas = Object.assign(HtmlInCanvasWrapped, {
-    isHtmlInCanvasSupported: exports.isHtmlInCanvasSupported,
+    isSupported: exports.isHtmlInCanvasSupported,
 });
 exports.HtmlInCanvas.displayName = 'HtmlInCanvas';
 (0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(exports.HtmlInCanvas);

package/dist/cjs/audio/shared-audio-tags.js

@@ -169,17 +169,27 @@ const SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled }
             return Promise.resolve();
         }
         audioContextIsPlayingEventually.current = true;
-        isResuming.current = (0, wait_until_actually_resumed_js_1.waitUntilActuallyResumed)(ctxAndGain.audioContext, logLevel)
-            .then(() => { })
-            .finally(() => {
+        const resumePromise = ctxAndGain.audioContext.resume();
+        isResuming.current = new Promise((resolve) => {
+            (0, wait_until_actually_resumed_js_1.waitUntilActuallyResumed)(ctxAndGain.audioContext, logLevel).then(resolve);
+            resumePromise.catch((err) => {
+                log_js_1.Log.warn({ logLevel, tag: 'audio' }, 'AudioContext resume rejected, continuing without audio sync', err);
+                resolve();
+            });
+        }).finally(() => {
             isResuming.current = null;
         });
         ctxAndGain.gainNode.gain.cancelScheduledValues(ctxAndGain.audioContext.currentTime);
         (_a = ctxAndGain.gainNode) === null || _a === void 0 ? void 0 : _a.gain.setValueAtTime(0, ctxAndGain.audioContext.currentTime);
         (_b = ctxAndGain.gainNode) === null || _b === void 0 ? void 0 : _b.gain.linearRampToValueAtTime(1, ctxAndGain.audioContext.currentTime + 0.03);
-        return ctxAndGain.audioContext.resume().then(() => {
+        return resumePromise
+            .then(() => {
             nodesToResume.current.forEach((r, node) => node.start(r.scheduledTime, r.offset, r.duration));
             nodesToResume.current.clear();
+        })
+            .catch(() => {
+            // Already logged above; swallow to avoid unhandled rejection
+            // since callers (e.g. use-playback.ts) do not await this.
         });
     }, [ctxAndGain, logLevel]);
     const getIsResumingAudioContext = (0, react_1.useCallback)(() => {

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

@@ -0,0 +1,12 @@
+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.ComponentType<HtmlInCanvasProps>;

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

@@ -0,0 +1,188 @@
+"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 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 run_effect_chain_js_1 = require("./run-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');
+};
+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, className, style, pixelRatio = 1, controls, }) => {
+    const frame = (0, use_current_frame_js_1.useCurrentFrame)();
+    const { delayRender, continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
+    const sourceCanvasRef = (0, react_1.useRef)(null);
+    const sceneRef = (0, react_1.useRef)(null);
+    const [outputCanvas, setOutputCanvas] = (0, react_1.useState)(null);
+    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 };
+    }
+    // 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 sourceCanvas = sourceCanvasRef.current;
+        const sceneEl = sceneRef.current;
+        const chainState = chainStateRef.current;
+        const output = outputCanvas;
+        const handle = pendingHandleRef.current;
+        if (!sourceCanvas ||
+            !sceneEl ||
+            !chainState ||
+            !output ||
+            handle === null) {
+            return;
+        }
+        const ctx = sourceCanvas.getContext('2d');
+        if (!ctx) {
+            cancelRender(new Error('Failed to acquire 2D context for <HtmlInCanvas> source'));
+            return;
+        }
+        const w = widthRef.current;
+        const h = heightRef.current;
+        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: sourceCanvas,
+            effects: effectsRef.current,
+            output,
+            frame: frameRef.current,
+            width: w,
+            height: h,
+            pixelRatio: pixelRatioRef.current,
+        })
+            .then((completed) => {
+            if (completed) {
+                continueRender(capturedHandle);
+            }
+        })
+            .catch((err) => {
+            cancelRender(err);
+        });
+    }, [outputCanvas, continueRender, cancelRender]);
+    // Set up layoutSubtree and persistent paint listener.
+    (0, react_1.useEffect)(() => {
+        if (!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 sourceCanvas = sourceCanvasRef.current;
+        if (!sourceCanvas) {
+            return;
+        }
+        sourceCanvas.layoutSubtree = true;
+        sourceCanvas.addEventListener('paint', onPaint);
+        return () => {
+            sourceCanvas.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 sourceCanvas = sourceCanvasRef.current;
+        sourceCanvas === null || sourceCanvas === void 0 ? void 0 : sourceCanvas.requestPaint();
+        return () => {
+            if (pendingHandleRef.current === handle) {
+                continueRender(handle);
+                pendingHandleRef.current = null;
+            }
+        };
+    }, [frame, delayRender, continueRender]);
+    // Cleanup chain state on unmount.
+    (0, react_1.useEffect)(() => {
+        return () => {
+            if (chainStateRef.current) {
+                (0, run_effect_chain_js_1.cleanupEffectChainState)(chainStateRef.current);
+            }
+        };
+    }, []);
+    const { durationInFrames } = (0, use_video_config_js_1.useVideoConfig)();
+    return (jsx_runtime_1.jsxs(Sequence_js_1.Sequence, { durationInFrames: durationInFrames, name: "<HtmlInCanvas>", controls: controls, children: [
+            jsx_runtime_1.jsx("canvas", { ref: sourceCanvasRef, width: width, height: height, style: {
+                    position: 'absolute',
+                    inset: 0,
+                    width,
+                    height,
+                    visibility: 'visible',
+                }, 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 = (0, wrap_in_schema_js_1.wrapInSchema)(HtmlInCanvasInner, htmlInCanvasSchema);
+exports.HtmlInCanvas.displayName = 'HtmlInCanvas';
+(0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(exports.HtmlInCanvas);

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

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

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

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Solid = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const enable_effects_js_1 = require("../enable-effects.js");
+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, _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 sourceCanvas = (0, react_1.useMemo)(() => {
+        if (typeof document === 'undefined') {
+            return null;
+        }
+        const canvas = document.createElement('canvas');
+        canvas.width = 1;
+        canvas.height = 1;
+        return canvas;
+    }, []);
+    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) {
+            return;
+        }
+        const handle = delayRender(`Solid effect chain (frame ${frame})`);
+        if (!enable_effects_js_1.ENABLE_EFFECTS) {
+            const outCtx = outputCanvas.getContext('2d', { colorSpace: 'srgb' });
+            if (!outCtx) {
+                cancelRender(new Error('Failed to acquire 2D context for <Solid> output'));
+                return;
+            }
+            outCtx.fillStyle = color;
+            outCtx.fillRect(0, 0, width, height);
+            continueRender(handle);
+            return () => {
+                continueRender(handle);
+            };
+        }
+        if (!chainState) {
+            continueRender(handle);
+            return () => {
+                continueRender(handle);
+            };
+        }
+        const ctx = sourceCanvas.getContext('2d', { colorSpace: 'srgb' });
+        if (!ctx) {
+            cancelRender(new Error('Failed to acquire 2D context for <Solid> source'));
+            return;
+        }
+        ctx.fillStyle = color;
+        ctx.fillRect(0, 0, 1, 1);
+        (0, run_effect_chain_js_1.runEffectChain)({
+            state: chainState.current,
+            source: sourceCanvas,
+            effects: experimentalEffects,
+            output: outputCanvas,
+            frame,
+            width,
+            height,
+        })
+            .then((completed) => {
+            if (completed) {
+                continueRender(handle);
+            }
+        })
+            .catch((err) => {
+            cancelRender(err);
+        });
+        return () => {
+            continueRender(handle);
+        };
+    }, [
+        frame,
+        color,
+        experimentalEffects,
+        outputCanvas,
+        sourceCanvas,
+        chainState,
+        width,
+        height,
+        pixelRatio,
+        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

@@ -0,0 +1,13 @@
+import type { Backend } from './effect-types.js';
+type CanvasPair = readonly [HTMLCanvasElement, HTMLCanvasElement];
+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

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CanvasPool = void 0;
+// Per-chain canvas pool. Each chain owns its own pool; pools are not shared
+// across chains because dimensions are chain-specific.
+//
+// Canvases are allocated lazily on first use of a given backend. Once
+// allocated, they are reused every frame for the chain's lifetime. Contexts
+// are created with the cross-backend alpha/sRGB contract enforced (see
+// `effect-types.ts`).
+class CanvasPool {
+    width;
+    height;
+    pairs = new Map();
+    lostContexts = new Set();
+    constructor(width, height) {
+        this.width = width;
+        this.height = height;
+    }
+    getPair(backend) {
+        const existing = this.pairs.get(backend);
+        if (existing) {
+            return existing;
+        }
+        const pair = [
+            this.allocateCanvas(backend),
+            this.allocateCanvas(backend),
+        ];
+        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;
+        canvas.height = this.height;
+        switch (backend) {
+            case '2d': {
+                const ctx = canvas.getContext('2d', {
+                    colorSpace: 'srgb',
+                });
+                if (!ctx) {
+                    throw new Error('Failed to acquire 2D context for canvas effect');
+                }
+                return canvas;
+            }
+            case 'webgl2': {
+                const ctx = canvas.getContext('webgl2', {
+                    premultipliedAlpha: true,
+                    alpha: true,
+                    preserveDrawingBuffer: true,
+                });
+                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;
+            }
+            case 'webgpu': {
+                if (typeof navigator === 'undefined' || !('gpu' in navigator)) {
+                    throw new Error('WebGPU is not available in this environment for canvas effect');
+                }
+                return canvas;
+            }
+            default: {
+                const exhaustive = backend;
+                throw new Error(`Unknown effect backend: ${exhaustive}`);
+            }
+        }
+    }
+}
+exports.CanvasPool = CanvasPool;

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

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

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

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createDescriptor = exports.defineEffect = void 0;
+// Identity helper for declaring an effect definition with proper type
+// inference. Wrapping the literal in `defineEffect(...)` lets TypeScript infer
+// `<P, S>` from the `setup` and `apply` signatures while still enforcing the
+// shape of the definition.
+const defineEffect = (definition) => definition;
+exports.defineEffect = defineEffect;
+// Factory helper for constructing per-frame descriptors from a definition.
+// Effect authors typically expose a small wrapper (e.g.
+// `export const blur = (params) => createDescriptor(blurDef, params)`) so users
+// don't reach into the internal definition object.
+//
+// `params` is type-checked against `P` at the call site, but the returned
+// descriptor erases both `P` and `S` to `unknown` so it can be freely
+// composed in `EffectsProp` arrays alongside descriptors of other effects.
+// Without this erasure the descriptor would be contravariant in `P` (via
+// `apply`'s argument), which would prevent assigning a concrete
+// `EffectDescriptor<MyParams>` into an `EffectDescriptor<unknown>` slot.
+const createDescriptor = (definition, params) => {
+    return {
+        definition: definition,
+        params,
+        stack: new Error().stack,
+    };
+};
+exports.createDescriptor = createDescriptor;

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

@@ -0,0 +1,7 @@
+import type { Backend, EffectDescriptor, EffectsProp } from './effect-types.js';
+export declare const flattenEffects: (effects: EffectsProp) => EffectDescriptor<unknown>[];
+export type Run = {
+    readonly backend: Backend;
+    readonly effects: ReadonlyArray<EffectDescriptor<unknown>>;
+};
+export declare const groupByBackend: (effects: readonly EffectDescriptor<unknown>[]) => Run[];

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

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.groupByBackend = exports.flattenEffects = void 0;
+// Internal helpers for the chain runtime. Exported separately so they can be
+// unit-tested without spinning up the React lifecycle / canvas mocking.
+const flattenEffects = (effects) => {
+    const out = [];
+    for (const item of effects) {
+        if (Array.isArray(item)) {
+            for (const inner of item) {
+                out.push(inner);
+            }
+        }
+        else {
+            out.push(item);
+        }
+    }
+    return out;
+};
+exports.flattenEffects = flattenEffects;
+const groupByBackend = (effects) => {
+    const runs = [];
+    let current = [];
+    let currentBackend = null;
+    for (const eff of effects) {
+        const { backend } = eff.definition;
+        if (currentBackend === null || backend === currentBackend) {
+            current.push(eff);
+            currentBackend = backend;
+        }
+        else {
+            runs.push({ backend: currentBackend, effects: current });
+            current = [eff];
+            currentBackend = backend;
+        }
+    }
+    if (currentBackend !== null && current.length > 0) {
+        runs.push({ backend: currentBackend, effects: current });
+    }
+    return runs;
+};
+exports.groupByBackend = groupByBackend;

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

@@ -0,0 +1,31 @@
+import type { SequenceSchema } from '../internals';
+export type Backend = '2d' | 'webgl2' | 'webgpu';
+type AnyGpuDevice = unknown;
+export type EffectApplyParams<P, S> = {
+    readonly source: CanvasImageSource;
+    readonly target: HTMLCanvasElement;
+    readonly state: S;
+    readonly params: P;
+    readonly frame: number;
+    readonly width: number;
+    readonly height: number;
+    readonly gpuDevice: AnyGpuDevice | null;
+};
+export type EffectDefinition<P, S = unknown> = {
+    readonly type: string;
+    readonly label: string;
+    readonly backend: Backend;
+    readonly setup: (target: HTMLCanvasElement) => S;
+    readonly apply: (params: EffectApplyParams<P, S>) => void;
+    readonly cleanup: (state: S) => void;
+    readonly schema: SequenceSchema | null;
+};
+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<unknown> | ReadonlyArray<EffectDescriptor<unknown>>>;
+export {};

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

@@ -0,0 +1,12 @@
+"use strict";
+// Public types for the canvas-effects system.
+//
+// An effect is a description of how to transform an input image into an output
+// image, executed inside a per-frame chain runtime owned by a source component
+// (`<Solid>`, `<HtmlInCanvas>`, ...). The chain runtime owns scratch canvases
+// and ping-pongs between them, so effects do not allocate per frame.
+//
+// Cross-backend contract: all canvases store premultiplied alpha and are
+// sRGB-encoded. Effects that perform color math in linear space are responsible
+// for converting to/from sRGB themselves.
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/canvas-effects/gpu-device.d.ts

@@ -0,0 +1,2 @@
+export declare const getGpuDevice: () => Promise<unknown>;
+export declare const _resetGpuDeviceForTesting: () => void;

package/dist/cjs/canvas-effects/gpu-device.js

@@ -0,0 +1,36 @@
+"use strict";
+// Singleton accessor for the WebGPU device.
+//
+// `navigator.gpu.requestAdapter()` and `adapter.requestDevice()` are async and
+// non-trivially expensive (~10-100ms on first call). The device is cached
+// globally so every webgpu effect / chain shares the same one.
+//
+// `GPUDevice` is intentionally typed as `unknown` here to avoid pulling
+// `@webgpu/types` into core; effects targeting webgpu narrow the type
+// themselves.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports._resetGpuDeviceForTesting = exports.getGpuDevice = void 0;
+let devicePromise = null;
+const getGpuDevice = () => {
+    if (devicePromise) {
+        return devicePromise;
+    }
+    devicePromise = (async () => {
+        if (typeof navigator === 'undefined' || !('gpu' in navigator)) {
+            throw new Error('WebGPU is not available in this environment');
+        }
+        const { gpu } = navigator;
+        const adapter = (await gpu.requestAdapter());
+        if (!adapter) {
+            throw new Error('No WebGPU adapter available');
+        }
+        return adapter.requestDevice();
+    })();
+    return devicePromise;
+};
+exports.getGpuDevice = getGpuDevice;
+// Test-only: reset the cached device. Not exported from `remotion`.
+const _resetGpuDeviceForTesting = () => {
+    devicePromise = null;
+};
+exports._resetGpuDeviceForTesting = _resetGpuDeviceForTesting;

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

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

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

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