remotion 4.0.489 → 4.0.491

package/dist/cjs/CompositionManager.d.ts

@@ -33,6 +33,7 @@ type EnhancedTSequenceData = {
     volume: string | number;
     doesVolumeChange: boolean;
     startMediaFrom: number;
+    mediaFrameAtSequenceZero: number | null;
     playbackRate: number;
     frozenMediaFrame: number | null;
 } | {
@@ -41,6 +42,7 @@ type EnhancedTSequenceData = {
     volume: string | number;
     doesVolumeChange: boolean;
     startMediaFrom: number;
+    mediaFrameAtSequenceZero: number | null;
     playbackRate: number;
     frozenMediaFrame: number | null;
 } | {

package/dist/cjs/HtmlInCanvas.d.ts

@@ -83,6 +83,7 @@ export declare const htmlInCanvasSchema: {
         readonly step: 0.01;
         readonly default: 1;
         readonly description: "Scale";
+        readonly defaultKeyframeOutput: "perceptual-scale";
     };
     readonly 'style.rotate': {
         readonly type: "rotation-css";

package/dist/cjs/HtmlInCanvas.js

@@ -63,12 +63,12 @@ const isMissingPaintRecordError = (error) => {
     return error instanceof DOMException && error.name === 'InvalidStateError';
 };
 const missingPaintRecordMessage = 'HtmlInCanvas: Expected the element to be inside the viewport during rendering, but Chrome had no cached paint record for it.';
-const resizeOffscreenCanvas = ({ offscreen, width, height, }) => {
-    if (offscreen.width !== width) {
-        offscreen.width = width;
+const resizePaintTarget = ({ target, width, height, }) => {
+    if (target.width !== width) {
+        target.width = width;
     }
-    if (offscreen.height !== height) {
-        offscreen.height = height;
+    if (target.height !== height) {
+        target.height = height;
     }
 };
 const defaultOnPaint = ({ canvas, element, elementImage, }) => {
@@ -80,24 +80,25 @@ const defaultOnPaint = ({ canvas, element, elementImage, }) => {
     const transform = ctx.drawElementImage(elementImage, 0, 0);
     element.style.transform = transform.toString();
 };
-/* eslint-enable react/require-default-props */
-const HtmlInCanvasAncestorContext = (0, react_1.createContext)(false);
+const HtmlInCanvasAncestorContext = (0, react_1.createContext)(null);
 const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, children, onPaint, onInit, pixelDensity, controls, style, }, ref) => {
     var _a;
-    const isInsideAncestorHtmlInCanvas = (0, react_1.useContext)(HtmlInCanvasAncestorContext);
+    const ancestor = (0, react_1.useContext)(HtmlInCanvasAncestorContext);
     assertHtmlInCanvasDimensions(width, height);
     const resolvedPixelDensity = resolveHtmlInCanvasPixelDensity(pixelDensity);
     const canvasWidth = Math.ceil(width * resolvedPixelDensity);
     const canvasHeight = Math.ceil(height * resolvedPixelDensity);
     const { continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
-    const { isRendering } = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
+    const { isClientSideRendering, isRendering } = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
+    const canRetryMissingPaintRecord = !isRendering || isClientSideRendering;
+    const usesDirectLayoutCanvas = onPaint === undefined && onInit === undefined;
     if (!(0, exports.isHtmlInCanvasSupported)()) {
         cancelRender(new Error(exports.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE));
     }
     const canvas2dRef = (0, react_1.useRef)(null);
-    const offscreenRef = (0, react_1.useRef)(null);
+    const paintTargetRef = (0, react_1.useRef)(null);
     const divRef = (0, react_1.useRef)(null);
-    const canvasSizeKey = `${width}x${height}@${resolvedPixelDensity}`;
+    const canvasSizeKey = `${width}x${height}@${resolvedPixelDensity}-${usesDirectLayoutCanvas ? 'direct' : 'offscreen'}`;
     const setLayoutCanvasRef = (0, react_1.useCallback)((node) => {
         canvas2dRef.current = node;
         if (typeof ref === 'function') {
@@ -122,18 +123,20 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
     const initializedRef = (0, react_1.useRef)(false);
     const onInitCleanupRef = (0, react_1.useRef)(null);
     const unmountedRef = (0, react_1.useRef)(false);
+    const ancestorRef = (0, react_1.useRef)(ancestor);
+    ancestorRef.current = ancestor;
     const onPaintCb = (0, react_1.useCallback)(async () => {
         var _a;
         const element = divRef.current;
         if (!element) {
             throw new Error('Canvas or scene element not found');
         }
-        const offscreen = offscreenRef.current;
-        if (!offscreen) {
-            throw new Error('HtmlInCanvas: offscreen canvas not ready (transferControlToOffscreen failed or canvas is remounting)');
+        const paintTarget = paintTargetRef.current;
+        if (!paintTarget) {
+            throw new Error('HtmlInCanvas: paint target is not ready because the canvas is remounting');
         }
-        resizeOffscreenCanvas({
-            offscreen,
+        resizePaintTarget({
+            target: paintTarget,
             width: canvasWidth,
             height: canvasHeight,
         });
@@ -144,34 +147,38 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
             }
             const handle = (0, delay_render_js_1.delayRender)('onPaint');
             if (!initializedRef.current) {
-                // `onInit` may be async (e.g. WebGPU `requestAdapter`/`requestDevice`).
-                // Capture an `ElementImage` here only for `onInit` consumers — do NOT
-                // reuse it for the paint handler below, because awaiting `onInit`
-                // can invalidate the capture's paint context, leaving subsequent
-                // uploads (e.g. `copyElementImageToTexture`) failing with
-                // "No context found for ElementImage" on the very first paint.
-                let initImage = null;
-                try {
-                    initImage = placeholderCanvas.captureElementImage(element);
+                const currentOnInit = onInitRef.current;
+                if (!currentOnInit) {
+                    initializedRef.current = true;
                 }
-                catch (error) {
-                    if (isMissingPaintRecordError(error) && !isRendering) {
-                        // Element may be outside viewport (no cached paint record).
-                        // Skip init — will retry on the next paint cycle.
-                    }
-                    else if (isMissingPaintRecordError(error)) {
-                        throw new Error(missingPaintRecordMessage);
+                else {
+                    // `onInit` may be async (e.g. WebGPU
+                    // `requestAdapter`/`requestDevice`). Do not reuse this capture for
+                    // `onPaint`: awaiting initialization can invalidate its paint context.
+                    let initImage;
+                    try {
+                        initImage = placeholderCanvas.captureElementImage(element);
                     }
-                    else {
+                    catch (error) {
+                        if (isMissingPaintRecordError(error) &&
+                            canRetryMissingPaintRecord) {
+                            // The web renderer explicitly drives additional paint cycles, so a
+                            // transient missing record can be retried without failing the render.
+                            continueRender(handle);
+                            return;
+                        }
+                        if (isMissingPaintRecordError(error)) {
+                            throw new Error(missingPaintRecordMessage);
+                        }
                         throw error;
                     }
-                }
-                if (initImage) {
                     initializedRef.current = true;
-                    const currentOnInit = onInitRef.current;
-                    if (currentOnInit) {
+                    try {
+                        if (paintTarget instanceof HTMLCanvasElement) {
+                            throw new Error('HtmlInCanvas: onInit requires an OffscreenCanvas paint target');
+                        }
                         const cleanup = await currentOnInit({
-                            canvas: offscreen,
+                            canvas: paintTarget,
                             element,
                             elementImage: initImage,
                             pixelDensity: resolvedPixelDensity,
@@ -186,9 +193,11 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
                             onInitCleanupRef.current = cleanup;
                         }
                     }
+                    finally {
+                        initImage.close();
+                    }
                 }
             }
-            const handler = (_a = onPaintRef.current) !== null && _a !== void 0 ? _a : defaultOnPaint;
             let elImage;
             try {
                 elImage = placeholderCanvas.captureElementImage(element);
@@ -197,7 +206,7 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
                 // `captureElementImage` throws `InvalidStateError` when the
                 // element is outside the viewport (no cached paint record).
                 // Skip this paint cycle — the canvas retains its last state.
-                if (isMissingPaintRecordError(error) && !isRendering) {
+                if (isMissingPaintRecordError(error) && canRetryMissingPaintRecord) {
                     continueRender(handle);
                     return;
                 }
@@ -206,20 +215,46 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
                 }
                 throw error;
             }
-            await handler({
-                canvas: offscreen,
-                element,
-                elementImage: elImage,
-                pixelDensity: resolvedPixelDensity,
-            });
-            await (0, run_effect_chain_js_1.runEffectChain)({
-                state: chainState.get(canvasWidth, canvasHeight),
-                source: offscreen,
-                effects: effectsRef.current,
-                output: offscreen,
-                width: canvasWidth,
-                height: canvasHeight,
-            });
+            try {
+                const currentOnPaint = onPaintRef.current;
+                if (currentOnPaint) {
+                    if (paintTarget instanceof HTMLCanvasElement) {
+                        throw new Error('HtmlInCanvas: onPaint requires an OffscreenCanvas paint target');
+                    }
+                    const paintResult = currentOnPaint({
+                        canvas: paintTarget,
+                        element,
+                        elementImage: elImage,
+                        pixelDensity: resolvedPixelDensity,
+                    });
+                    if (paintResult) {
+                        await paintResult;
+                    }
+                }
+                else {
+                    defaultOnPaint({
+                        canvas: paintTarget,
+                        element,
+                        elementImage: elImage,
+                        pixelDensity: resolvedPixelDensity,
+                    });
+                }
+                await (0, run_effect_chain_js_1.runEffectChain)({
+                    state: chainState.get(canvasWidth, canvasHeight),
+                    source: paintTarget,
+                    effects: effectsRef.current,
+                    output: paintTarget,
+                    width: canvasWidth,
+                    height: canvasHeight,
+                });
+            }
+            finally {
+                elImage.close();
+            }
+            // Effects may complete after Chromium has dispatched the parent's
+            // paint event. Repaint the direct parent so deeply nested canvases
+            // propagate their final pixels through every ancestor.
+            (_a = ancestorRef.current) === null || _a === void 0 ? void 0 : _a.requestParentPaint();
             continueRender(handle);
         }
         catch (error) {
@@ -232,20 +267,23 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
         continueRender,
         cancelRender,
         resolvedPixelDensity,
-        isRendering,
+        canRetryMissingPaintRecord,
     ]);
-    // Transfer control once per layout canvas instance, then listen for paint on
-    // the placeholder (capture) while drawing on the linked offscreen surface.
+    // Default paint handlers draw synchronously on the layout canvas itself so
+    // Chromium can include their final pixels during its deepest-first nested
+    // paint traversal. Custom handlers retain the transferred OffscreenCanvas API.
     (0, react_1.useLayoutEffect)(() => {
         const placeholder = canvas2dRef.current;
         if (!placeholder) {
             throw new Error('Canvas not found');
         }
         placeholder.layoutSubtree = true;
-        const offscreen = placeholder.transferControlToOffscreen();
-        offscreenRef.current = offscreen;
-        resizeOffscreenCanvas({
-            offscreen,
+        const paintTarget = usesDirectLayoutCanvas
+            ? placeholder
+            : placeholder.transferControlToOffscreen();
+        paintTargetRef.current = paintTarget;
+        resizePaintTarget({
+            target: paintTarget,
             width: canvasWidth,
             height: canvasHeight,
         });
@@ -255,13 +293,19 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
         return () => {
             var _a;
             placeholder.removeEventListener('paint', onPaintCb);
-            offscreenRef.current = null;
+            paintTargetRef.current = null;
             initializedRef.current = false;
             unmountedRef.current = true;
             (_a = onInitCleanupRef.current) === null || _a === void 0 ? void 0 : _a.call(onInitCleanupRef);
             onInitCleanupRef.current = null;
         };
-    }, [onPaintCb, cancelRender, canvasWidth, canvasHeight]);
+    }, [
+        onPaintCb,
+        cancelRender,
+        canvasWidth,
+        canvasHeight,
+        usesDirectLayoutCanvas,
+    ]);
     const onPaintChangedRef = (0, react_1.useRef)(false);
     (0, react_1.useLayoutEffect)(() => {
         var _a;
@@ -301,10 +345,15 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
             ...(style !== null && style !== void 0 ? style : {}),
         };
     }, [height, style, width]);
-    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 (jsx_runtime_1.jsx(HtmlInCanvasAncestorContext.Provider, { value: true, children: jsx_runtime_1.jsx("canvas", { ref: setLayoutCanvasRef, width: canvasWidth, height: canvasHeight, style: canvasStyle, children: jsx_runtime_1.jsx("div", { ref: divRef, style: innerStyle, children: children }) }, canvasSizeKey) }));
+    const ancestorValue = (0, react_1.useMemo)(() => {
+        return {
+            requestParentPaint: () => {
+                var _a, _b;
+                (_b = (_a = canvas2dRef.current) === null || _a === void 0 ? void 0 : _a.requestPaint) === null || _b === void 0 ? void 0 : _b.call(_a);
+            },
+        };
+    }, []);
+    return (jsx_runtime_1.jsx(HtmlInCanvasAncestorContext.Provider, { value: ancestorValue, children: jsx_runtime_1.jsx("canvas", { ref: setLayoutCanvasRef, width: canvasWidth, height: canvasHeight, style: canvasStyle, children: jsx_runtime_1.jsx("div", { ref: divRef, style: innerStyle, children: children }) }, canvasSizeKey) }));
 });
 HtmlInCanvasContent.displayName = 'HtmlInCanvasContent';
 const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, effects = [], children, onPaint, onInit, pixelDensity, controls, style, durationInFrames, name, ...sequenceProps }, ref) => {

package/dist/cjs/Img.d.ts

@@ -36,6 +36,7 @@ export declare const imgSchema: {
         readonly step: 0.01;
         readonly default: 1;
         readonly description: "Scale";
+        readonly defaultKeyframeOutput: "perceptual-scale";
     };
     readonly 'style.rotate': {
         readonly type: "rotation-css";

package/dist/cjs/Interactive.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import type { SequenceControls } from './CompositionManager.js';
 import { type InteractivitySchema } from './interactivity-schema.js';
 import type { AbsoluteFillLayout, SequenceProps } from './Sequence.js';
+import { type WithInteractivitySchemaOptions } from './with-interactivity-schema.js';
 type InteractiveHtmlTag = 'a' | 'article' | 'aside' | 'button' | 'code' | 'div' | 'em' | 'footer' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'header' | 'label' | 'li' | 'main' | 'nav' | 'ol' | 'p' | 'pre' | 'section' | 'small' | 'span' | 'strong' | 'ul';
 type InteractiveSvgTag = 'circle' | 'ellipse' | 'g' | 'line' | 'path' | 'rect' | 'svg' | 'text';
 type InteractiveTag = InteractiveHtmlTag | InteractiveSvgTag;
@@ -17,6 +17,7 @@ type InteractiveSequenceProps = InteractiveBaseProps & {
 };
 type InteractiveElementProps<Tag extends InteractiveTag> = Omit<React.ComponentPropsWithoutRef<Tag>, keyof InteractiveSequenceProps> & InteractiveSequenceProps;
 type InteractiveElementComponent<Tag extends InteractiveTag> = React.ComponentType<InteractiveElementProps<Tag> & React.RefAttributes<ElementForTag<Tag>>>;
+type RemotionComponentIdentityPackage = 'remotion' | `@remotion/${string}`;
 /**
  * @description HTML and SVG elements that are registered in the Remotion Studio timeline and can be visually edited.
  */
@@ -71,6 +72,7 @@ export declare const Interactive: {
             readonly step: 0.01;
             readonly default: 1;
             readonly description: "Scale";
+            readonly defaultKeyframeOutput: "perceptual-scale";
         };
         readonly 'style.rotate': {
             readonly type: "rotation-css";
@@ -242,6 +244,7 @@ export declare const Interactive: {
                         readonly step: 0.01;
                         readonly default: 1;
                         readonly description: "Scale";
+                        readonly defaultKeyframeOutput: "perceptual-scale";
                     };
                     readonly 'style.rotate': {
                         readonly type: "rotation-css";
@@ -284,15 +287,11 @@ export declare const Interactive: {
             };
         };
     };
-    withSchema: <S extends InteractivitySchema, Props extends object>({ Component, componentName, componentIdentity, schema, supportsEffects, }: {
-        Component: React.ComponentType<Props & {
-            readonly controls: SequenceControls | undefined;
-        }>;
-        componentName: string;
-        componentIdentity: string | null;
-        schema: S;
-        supportsEffects: boolean;
-    }) => React.ComponentType<Props>;
+    withSchema: <S extends InteractivitySchema, Props extends object>(options: WithInteractivitySchemaOptions<S, Props>) => React.ComponentType<Props>;
+    _internalMakeRemotionComponentIdentity: ({ packageName, componentName, }: {
+        readonly packageName: RemotionComponentIdentityPackage;
+        readonly componentName: string;
+    }) => string;
     A: InteractiveElementComponent<"a">;
     Article: InteractiveElementComponent<"article">;
     Aside: InteractiveElementComponent<"aside">;

package/dist/cjs/Interactive.js

@@ -40,6 +40,21 @@ const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-trace
 const interactivity_schema_js_1 = require("./interactivity-schema.js");
 const Sequence_js_1 = require("./Sequence.js");
 const with_interactivity_schema_js_1 = require("./with-interactivity-schema.js");
+const sourcePathToIdentityPrefix = (packageName) => {
+    if (packageName === 'remotion') {
+        return 'dev.remotion.remotion';
+    }
+    if (packageName.startsWith('@remotion/')) {
+        const normalizedPackageName = packageName
+            .slice('@remotion/'.length)
+            .replace(/-([a-z])/g, (_, char) => char.toUpperCase());
+        return `dev.remotion.${normalizedPackageName}`;
+    }
+    throw new Error(`Unsupported Remotion package name: ${packageName}`);
+};
+const makeRemotionComponentIdentity = ({ packageName, componentName, }) => {
+    return `${sourcePathToIdentityPrefix(packageName)}.${componentName}`;
+};
 const interactiveElementSchema = {
     ...interactivity_schema_js_1.baseSchema,
     ...interactivity_schema_js_1.transformSchema,
@@ -54,6 +69,11 @@ const setRef = (ref, value) => {
         ref.current = value;
     }
 };
+const withSchema = (options) => {
+    const Wrapped = (0, with_interactivity_schema_js_1.withInteractivitySchema)(options);
+    (0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(Wrapped);
+    return Wrapped;
+};
 const makeInteractiveElement = (tag, displayName) => {
     const Inner = (0, react_1.forwardRef)((propsWithControls, ref) => {
         const { durationInFrames, from, trimBefore, freeze, hidden, name, showInTimeline, stack, controls, ...props } = propsWithControls;
@@ -68,15 +88,17 @@ const makeInteractiveElement = (tag, displayName) => {
             }) }));
     });
     Inner.displayName = displayName;
-    const Wrapped = (0, with_interactivity_schema_js_1.withInteractivitySchema)({
+    const Wrapped = withSchema({
         Component: Inner,
         componentName: displayName,
-        componentIdentity: `dev.remotion.remotion.${displayName.slice(1, -1)}`,
+        componentIdentity: makeRemotionComponentIdentity({
+            packageName: 'remotion',
+            componentName: displayName.slice(1, -1),
+        }),
         schema: interactiveElementSchema,
         supportsEffects: false,
     });
     Wrapped.displayName = displayName;
-    (0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(Wrapped);
     return Wrapped;
 };
 /**
@@ -88,7 +110,8 @@ exports.Interactive = {
     textSchema: interactivity_schema_js_1.textSchema,
     premountSchema: interactivity_schema_js_1.premountSchema,
     sequenceSchema: interactivity_schema_js_1.sequenceSchema,
-    withSchema: with_interactivity_schema_js_1.withInteractivitySchema,
+    withSchema,
+    _internalMakeRemotionComponentIdentity: makeRemotionComponentIdentity,
     A: makeInteractiveElement('a', '<Interactive.A>'),
     Article: makeInteractiveElement('article', '<Interactive.Article>'),
     Aside: makeInteractiveElement('aside', '<Interactive.Aside>'),

package/dist/cjs/Sequence.js

@@ -235,6 +235,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
                     src: isMedia.data.src,
                     getStack: () => stackRef.current,
                     startMediaFrom: startMediaFrom !== null && startMediaFrom !== void 0 ? startMediaFrom : isMedia.data.startMediaFrom,
+                    mediaFrameAtSequenceZero,
                     volume: isMedia.data.volumes,
                     refForOutline: refForOutline !== null && refForOutline !== void 0 ? refForOutline : null,
                     isInsideSeries,
@@ -298,6 +299,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
         isInsideSeries,
         registeredFrozenFrame,
         startMediaFrom,
+        mediaFrameAtSequenceZero,
         frozenMediaFrame,
     ]);
     // Ceil to support floats

package/dist/cjs/SequenceManager.d.ts

@@ -64,6 +64,13 @@ export type SequencePropsSubscriptionKey = {
     nodePath: SequenceNodePath;
     sequenceKeys: string[];
     effectKeys: string[][];
+    videoConfigValues: VideoConfigValues | null;
+};
+export type VideoConfigValues = {
+    durationInFrames: number;
+    fps: number;
+    height: number;
+    width: number;
 };
 export declare const SequenceManagerProvider: React.FC<{
     readonly children: React.ReactNode;

package/dist/cjs/SequenceManager.js

@@ -49,7 +49,7 @@ exports.SequenceManagerRefContext = react_1.default.createContext({
     current: [],
 });
 const makeSequencePropsSubscriptionKey = (key) => {
-    return `${key.nodePath.join('.')}.${key.sequenceKeys.join('.')}.${key.effectKeys.map((keys) => keys.join('.')).join('.')}`;
+    return `${key.absolutePath}\0${key.nodePath.join('.')}\0${key.sequenceKeys.join('.')}\0${key.effectKeys.map((keys) => keys.join('.')).join('.')}`;
 };
 exports.makeSequencePropsSubscriptionKey = makeSequencePropsSubscriptionKey;
 exports.VisualModePropStatusesContext = react_1.default.createContext({

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

@@ -321,7 +321,9 @@ const SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
                 return;
             }
             if (data === undefined) {
-                current.src = EMPTY_AUDIO;
+                if (current.src !== EMPTY_AUDIO) {
+                    current.src = EMPTY_AUDIO;
+                }
                 return;
             }
             if (!data) {
@@ -393,7 +395,9 @@ const SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
                     prevA.premounting === premounting &&
                     prevA.postmounting === postmounting;
                 if (isTheSame) {
-                    return prevA;
+                    return prevA.audioMounted === audioMounted
+                        ? prevA
+                        : { ...prevA, audioMounted };
                 }
                 changed = true;
                 return {
@@ -405,7 +409,9 @@ const SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
                     audioMounted,
                 };
             }
-            return prevA;
+            return prevA.audioMounted === audioMounted
+                ? prevA
+                : { ...prevA, audioMounted };
         });
         if (changed) {
             rerenderAudios();
@@ -444,13 +450,16 @@ const SharedAudioTagsContextProvider = ({ children, numberOfAudioTags }) => {
         unregisterAudio,
         updateAudio,
     ]);
-    return (jsx_runtime_1.jsxs(exports.SharedAudioTagsContext.Provider, { value: audioTagsValue, children: [refs.map(({ id, ref }) => {
-                return (
-                // Without preload="metadata", iOS will seek the time internally
-                // but not actually with sound. Adding `preload="metadata"` helps here.
-                // https://discord.com/channels/809501355504959528/817306414069710848/1130519583367888906
-                jsx_runtime_1.jsx("audio", { ref: ref, preload: "metadata", src: EMPTY_AUDIO }, id));
-            }), children] }));
+    const sharedAudioTagElements = (0, react_1.useMemo)(() => {
+        return refs.map(({ id, ref }) => {
+            return (
+            // Without preload="metadata", iOS will seek the time internally
+            // but not actually with sound. Adding `preload="metadata"` helps here.
+            // https://discord.com/channels/809501355504959528/817306414069710848/1130519583367888906
+            jsx_runtime_1.jsx("audio", { ref: ref, preload: "metadata", src: EMPTY_AUDIO }, id));
+        });
+    }, [refs]);
+    return (jsx_runtime_1.jsxs(exports.SharedAudioTagsContext.Provider, { value: audioTagsValue, children: [sharedAudioTagElements, children] }));
 };
 exports.SharedAudioTagsContextProvider = SharedAudioTagsContextProvider;
 const useSharedAudio = ({ aud, audioId, premounting, postmounting, }) => {

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

@@ -20,6 +20,7 @@ export declare const canvasImageSchema: {
         readonly step: 0.01;
         readonly default: 1;
         readonly description: "Scale";
+        readonly defaultKeyframeOutput: "perceptual-scale";
     };
     readonly 'style.rotate': {
         readonly type: "rotation-css";

package/dist/cjs/delay-render.d.ts

@@ -1,3 +1,4 @@
+import type { LogLevel } from './log.js';
 import type { RemotionEnvironment } from './remotion-environment-context.js';
 export type DelayRenderScope = {
     remotion_renderReady: boolean;
@@ -26,21 +27,24 @@ export type DelayRenderOptions = {
  * This allows useDelayRender to control its own environment source.
  * @private
  */
-export declare const delayRenderInternal: ({ scope, environment, label, options, }: {
+type DelayRenderInternalOptions = {
     scope: DelayRenderScope;
     environment: RemotionEnvironment;
     label: string | null;
     options: DelayRenderOptions;
-}) => number;
+};
+export declare const delayRenderInternal: ({ scope, environment, label, options, }: DelayRenderInternalOptions) => number;
 export declare const delayRender: (label?: string | undefined, options?: DelayRenderOptions | undefined) => number;
 /**
  * Internal function that accepts environment as parameter.
  * @private
  */
-export declare const continueRenderInternal: ({ scope, handle, environment, logLevel, }: {
+type ContinueRenderInternalOptions = {
     scope: DelayRenderScope;
     handle: number;
     environment: RemotionEnvironment;
-    logLevel: "error" | "info" | "trace" | "verbose" | "warn";
-}) => void;
+    logLevel: LogLevel;
+};
+export declare const continueRenderInternal: ({ scope, handle, environment, logLevel, }: ContinueRenderInternalOptions) => void;
 export declare const continueRender: (handle: number) => void;
+export {};