remotion 4.0.536 → 4.0.538

package/dist/cjs/HtmlInCanvas.d.ts

@@ -91,55 +91,57 @@ export type HtmlInCanvasProps = Omit<InteractiveBaseProps, 'children'> & Interac
     readonly onInit?: HtmlInCanvasOnInit;
     readonly pixelDensity?: HtmlInCanvasPixelDensity;
     readonly _remotionInternalCanvasSiblings?: React.ReactNode;
+    readonly _remotionInternalFallbackLabel?: string;
 };
+export declare const useHtmlInCanvasUnsupportedMessage: () => string | null;
 export declare const htmlInCanvasSchema: {
     readonly 'style.transformOrigin': {
-        readonly type: "transform-origin";
+        readonly type: 'transform-origin';
         readonly step: 1;
-        readonly default: "50% 50%";
-        readonly description: "Transform origin";
+        readonly default: '50% 50%';
+        readonly description: 'Transform origin';
     };
     readonly 'style.translate': {
-        readonly type: "translate";
+        readonly type: 'translate';
         readonly step: 1;
-        readonly default: "0px 0px";
-        readonly description: "Offset";
+        readonly default: '0px 0px';
+        readonly description: 'Offset';
     };
     readonly 'style.scale': {
-        readonly type: "scale";
+        readonly type: 'scale';
         readonly max: 100;
         readonly step: 0.01;
         readonly default: 1;
-        readonly description: "Scale";
-        readonly defaultKeyframeOutput: "perceptual-scale";
+        readonly description: 'Scale';
+        readonly defaultKeyframeOutput: 'perceptual-scale';
     };
     readonly 'style.rotate': {
-        readonly type: "rotation-css";
+        readonly type: 'rotation-css';
         readonly step: 1;
-        readonly default: "0deg";
-        readonly description: "Rotation";
+        readonly default: '0deg';
+        readonly description: 'Rotation';
     };
     readonly 'style.opacity': {
-        readonly type: "number";
+        readonly type: 'number';
         readonly min: 0;
         readonly max: 1;
         readonly step: 0.01;
         readonly default: 1;
-        readonly description: "Opacity";
+        readonly description: 'Opacity';
         readonly hiddenFromList: false;
     };
     readonly 'style.borderWidth': {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: undefined;
         readonly min: 0;
         readonly step: 1;
-        readonly description: "Border width";
+        readonly description: 'Border width';
         readonly hiddenFromList: false;
     };
     readonly 'style.borderStyle': {
-        readonly type: "enum";
-        readonly default: "none";
-        readonly description: "Border style";
+        readonly type: 'enum';
+        readonly default: 'none';
+        readonly description: 'Border style';
         readonly variants: {
             readonly none: {};
             readonly hidden: {};
@@ -154,67 +156,67 @@ export declare const htmlInCanvasSchema: {
         };
     };
     readonly 'style.borderColor': {
-        readonly type: "color";
+        readonly type: 'color';
         readonly default: undefined;
-        readonly description: "Border color";
+        readonly description: 'Border color';
     };
     readonly 'style.borderRadius': {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
         readonly min: 0;
         readonly step: 1;
-        readonly description: "Border radius";
+        readonly description: 'Border radius';
         readonly hiddenFromList: false;
         readonly keyframable: true;
     };
     readonly 'style.borderTopLeftRadius': {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
         readonly min: 0;
         readonly step: 1;
-        readonly description: "Top left radius";
+        readonly description: 'Top left radius';
         readonly hiddenFromList: false;
     };
     readonly 'style.borderTopRightRadius': {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
         readonly min: 0;
         readonly step: 1;
-        readonly description: "Top right radius";
+        readonly description: 'Top right radius';
         readonly hiddenFromList: false;
     };
     readonly 'style.borderBottomRightRadius': {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
         readonly min: 0;
         readonly step: 1;
-        readonly description: "Bottom right radius";
+        readonly description: 'Bottom right radius';
         readonly hiddenFromList: false;
     };
     readonly 'style.borderBottomLeftRadius': {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
         readonly min: 0;
         readonly step: 1;
-        readonly description: "Bottom left radius";
+        readonly description: 'Bottom left radius';
         readonly hiddenFromList: false;
     };
     readonly 'style.backgroundColor': {
-        readonly type: "color";
-        readonly default: "transparent";
-        readonly description: "Color";
+        readonly type: 'color';
+        readonly default: 'transparent';
+        readonly description: 'Color';
     };
     readonly premountFor: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: undefined;
-        readonly description: "Premount For";
+        readonly description: 'Premount For';
         readonly min: 0;
         readonly step: 1;
         readonly hiddenFromList: false;
         readonly keyframable: false;
     };
     readonly postmountFor: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
         readonly min: 0;
         readonly step: 1;
@@ -222,9 +224,9 @@ export declare const htmlInCanvasSchema: {
         readonly keyframable: false;
     };
     readonly cropLeft: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
-        readonly description: "Crop left";
+        readonly description: 'Crop left';
         readonly min: 0;
         readonly max: 1;
         readonly step: 0.01;
@@ -232,9 +234,9 @@ export declare const htmlInCanvasSchema: {
         readonly keyframable: true;
     };
     readonly cropRight: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
-        readonly description: "Crop right";
+        readonly description: 'Crop right';
         readonly min: 0;
         readonly max: 1;
         readonly step: 0.01;
@@ -242,9 +244,9 @@ export declare const htmlInCanvasSchema: {
         readonly keyframable: true;
     };
     readonly cropTop: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
-        readonly description: "Crop top";
+        readonly description: 'Crop top';
         readonly min: 0;
         readonly max: 1;
         readonly step: 0.01;
@@ -252,9 +254,9 @@ export declare const htmlInCanvasSchema: {
         readonly keyframable: true;
     };
     readonly cropBottom: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
-        readonly description: "Crop bottom";
+        readonly description: 'Crop bottom';
         readonly min: 0;
         readonly max: 1;
         readonly step: 0.01;
@@ -262,36 +264,36 @@ export declare const htmlInCanvasSchema: {
         readonly keyframable: true;
     };
     readonly durationInFrames: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: undefined;
         readonly min: 1;
         readonly step: 1;
         readonly hiddenFromList: true;
     };
     readonly from: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
         readonly step: 1;
         readonly hiddenFromList: true;
     };
     readonly trimBefore: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 0;
         readonly min: 0;
         readonly step: 1;
         readonly hiddenFromList: true;
     };
     readonly playbackRate: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: 1;
         readonly min: 0.01;
         readonly step: 0.1;
-        readonly description: "Playback rate";
+        readonly description: 'Playback rate';
         readonly hiddenFromList: false;
         readonly keyframable: false;
     };
     readonly freeze: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly default: null;
         readonly step: 1;
         readonly hiddenFromList: true;
@@ -300,27 +302,16 @@ export declare const htmlInCanvasSchema: {
     readonly name: import("./interactivity-schema.js").HiddenFieldSchema;
     readonly showInTimeline: import("./interactivity-schema.js").HiddenFieldSchema;
     readonly pixelDensity: {
-        readonly type: "number";
+        readonly type: 'number';
         readonly min: 1;
         readonly max: 3;
         readonly step: 0.1;
         readonly default: 1;
-        readonly description: "Pixel density";
+        readonly description: 'Pixel density';
         readonly hiddenFromList: false;
     };
 };
-export declare const HtmlInCanvas: React.ForwardRefExoticComponent<Omit<InteractiveBaseProps, "children"> & InteractiveCropProps & Omit<AbsoluteFillLayout, "layout"> & {
-    readonly durationInFrames?: number | undefined;
-    readonly width: number;
-    readonly height: number;
-    readonly effects?: EffectsProp | undefined;
-    readonly effectsOutputSize?: EffectsOutputSize | undefined;
-    readonly children: React.ReactNode;
-    readonly onPaint?: HtmlInCanvasOnPaint | undefined;
-    readonly onInit?: HtmlInCanvasOnInit | undefined;
-    readonly pixelDensity?: number | undefined;
-    readonly _remotionInternalCanvasSiblings?: React.ReactNode;
-} & React.RefAttributes<HTMLCanvasElement>> & {
-    readonly isSupported: () => boolean;
-    readonly isNestingSupported: () => boolean;
+export declare const HtmlInCanvas: React.ForwardRefExoticComponent<HtmlInCanvasProps & React.RefAttributes<HTMLCanvasElement>> & {
+    readonly isSupported: typeof isHtmlInCanvasSupported;
+    readonly isNestingSupported: typeof isHtmlInCanvasNestingSupported;
 };

package/dist/cjs/HtmlInCanvas.js

@@ -1,13 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HtmlInCanvas = exports.htmlInCanvasSchema = exports.getHtmlInCanvasUnsupportedMessage = exports.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE = exports.isHtmlInCanvasNestingSupported = exports.isHtmlInCanvasSupported = void 0;
+exports.HtmlInCanvas = exports.htmlInCanvasSchema = exports.useHtmlInCanvasUnsupportedMessage = exports.getHtmlInCanvasUnsupportedMessage = exports.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE = exports.isHtmlInCanvasNestingSupported = exports.isHtmlInCanvasSupported = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const DefaultPremountContext_js_1 = require("./DefaultPremountContext.js");
 const run_effect_chain_js_1 = require("./effects/run-effect-chain.js");
 const use_effect_chain_state_js_1 = require("./effects/use-effect-chain-state.js");
 const use_memoized_effects_js_1 = require("./effects/use-memoized-effects.js");
 const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
 const freeze_js_1 = require("./freeze.js");
+const HtmlInCanvasFallback_js_1 = require("./HtmlInCanvasFallback.js");
 const interactivity_schema_js_1 = require("./interactivity-schema.js");
 const resolve_sequence_duration_js_1 = require("./resolve-sequence-duration.js");
 const Sequence_js_1 = require("./Sequence.js");
@@ -146,6 +148,17 @@ const defaultOnPaint = ({ canvas, elementImage, }) => {
     ctx.drawElementImage(elementImage, 0, 0);
 };
 const HtmlInCanvasAncestorContext = (0, react_1.createContext)(null);
+const useHtmlInCanvasUnsupportedMessage = () => {
+    const ancestorPaintState = (0, react_1.useContext)(HtmlInCanvasAncestorContext);
+    if (!(0, exports.isHtmlInCanvasSupported)()) {
+        return (0, exports.getHtmlInCanvasUnsupportedMessage)();
+    }
+    if (ancestorPaintState && !(0, exports.isHtmlInCanvasNestingSupported)()) {
+        return `Nested <HtmlInCanvas> components require Chrome ${MINIMUM_CHROME_VERSION_FOR_NESTED_HTML_IN_CANVAS} or newer with HTML-in-canvas enabled.`;
+    }
+    return null;
+};
+exports.useHtmlInCanvasUnsupportedMessage = useHtmlInCanvasUnsupportedMessage;
 const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, effectsOutputSize, children, canvasSiblings, onPaint, onInit, pixelDensity, controls, style, renderFrame, }, ref) => {
     var _a, _b;
     const ancestorPaintState = (0, react_1.useContext)(HtmlInCanvasAncestorContext);
@@ -160,11 +173,15 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, e
     const { isClientSideRendering, isRendering } = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     const canRetryMissingPaintRecord = !isRendering || isClientSideRendering;
     const usesDirectLayoutCanvas = onPaint === undefined && onInit === undefined;
-    const paintTargetMode = usesDirectLayoutCanvas
-        ? 'direct'
-        : isRendering
-            ? 'copied'
-            : 'transferred';
+    // Keep a nested drawable canvas separate from the bitmap captured by its
+    // parent. Reusing it for both can crash Chromium during raster invalidation.
+    const paintTargetMode = ancestorPaintState
+        ? 'copied'
+        : usesDirectLayoutCanvas
+            ? 'direct'
+            : isRendering
+                ? 'copied'
+                : 'transferred';
     if (!(0, exports.isHtmlInCanvasSupported)()) {
         cancelRender(new Error((0, exports.getHtmlInCanvasUnsupportedMessage)()));
     }
@@ -237,9 +254,11 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, e
     const initializedRef = (0, react_1.useRef)(false);
     const onInitCleanupRef = (0, react_1.useRef)(null);
     const unmountedRef = (0, react_1.useRef)(false);
+    const effectScratchCanvasesRef = (0, react_1.useRef)(null);
     const paintingTargets = (0, react_1.useRef)(new WeakMap());
     const onPaintCb = (0, react_1.useCallback)(async () => {
         var _a, _b;
+        var _c;
         if (isRendering && paintState.pendingChildren > 0) {
             return;
         }
@@ -351,6 +370,7 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, e
                 }
                 throw error;
             }
+            let effectSourceCanvas = null;
             try {
                 const currentOnPaint = onPaintRef.current;
                 if (currentOnPaint) {
@@ -367,6 +387,48 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, e
                         await paintResult;
                     }
                 }
+                else if (paintTarget instanceof HTMLCanvasElement &&
+                    effectsRef.current.some((effect) => !effect.params.disabled)) {
+                    // The element image can only be drawn into the visible layout
+                    // canvas, but effects finish asynchronously (e.g. while the
+                    // WebGPU device initializes). Move the unprocessed pixels to a
+                    // scratch canvas and restore the previous output within this task,
+                    // so the browser never presents the HTML without its effects.
+                    (_c = effectScratchCanvasesRef.current) !== null && _c !== void 0 ? _c : (effectScratchCanvasesRef.current = {
+                        source: document.createElement('canvas'),
+                        previousOutput: document.createElement('canvas'),
+                    });
+                    const { source: effectSource, previousOutput } = effectScratchCanvasesRef.current;
+                    resizePaintTarget({
+                        target: effectSource,
+                        width: canvasWidth,
+                        height: canvasHeight,
+                    });
+                    resizePaintTarget({
+                        target: previousOutput,
+                        width: canvasWidth,
+                        height: canvasHeight,
+                    });
+                    const effectSourceCtx = effectSource.getContext('2d');
+                    const previousOutputCtx = previousOutput.getContext('2d');
+                    const paintTargetCtx = paintTarget.getContext('2d');
+                    if (!effectSourceCtx || !previousOutputCtx || !paintTargetCtx) {
+                        throw new Error('Failed to acquire 2D context for <HtmlInCanvas> canvas');
+                    }
+                    previousOutputCtx.reset();
+                    previousOutputCtx.drawImage(paintTarget, 0, 0);
+                    defaultOnPaint({
+                        canvas: paintTarget,
+                        element,
+                        elementImage: elImage,
+                        pixelDensity: resolvedPixelDensity,
+                    });
+                    effectSourceCtx.reset();
+                    effectSourceCtx.drawImage(paintTarget, 0, 0);
+                    paintTargetCtx.reset();
+                    paintTargetCtx.drawImage(previousOutput, 0, 0);
+                    effectSourceCanvas = effectSource;
+                }
                 else {
                     defaultOnPaint({
                         canvas: paintTarget,
@@ -380,7 +442,7 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, e
                 if (state) {
                     await (0, run_effect_chain_js_1.runEffectChain)({
                         state,
-                        source: paintTarget,
+                        source: effectSourceCanvas !== null && effectSourceCanvas !== void 0 ? effectSourceCanvas : paintTarget,
                         effects: effectsRef.current,
                         output: paintTarget,
                         width: canvasWidth,
@@ -445,10 +507,11 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, e
             paintState.release = null;
         };
     }, [paintState]);
-    // Default paint handlers draw synchronously on the layout canvas itself.
-    // ElementImage can only be drawn into its associated canvas, so custom
-    // handlers retain a transferred target. Rendering copies it to a separate
-    // visible canvas without waiting for the transferred canvas to present.
+    // Non-nested default handlers paint directly on the layout canvas. Nested
+    // canvases and custom handlers retain a transferred target because an
+    // ElementImage can only be drawn into its associated canvas. Nested canvases
+    // and rendering copy it to a separate visible canvas without waiting for
+    // the transferred canvas to present.
     (0, react_1.useLayoutEffect)(() => {
         var _a;
         const placeholder = canvas2dRef.current;
@@ -538,8 +601,7 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, e
             ...(style !== null && style !== void 0 ? style : {}),
         };
     }, [height, style, width]);
-    return (jsx_runtime_1.jsxs(HtmlInCanvasAncestorContext.Provider, { value: paintState, children: [
-            jsx_runtime_1.jsxs("canvas", { ref: paintTargetMode === 'copied' ? canvas2dRef : setVisibleCanvasRef, width: canvasWidth, height: canvasHeight, style: paintTargetMode === 'copied'
+    return ((0, jsx_runtime_1.jsxs)(HtmlInCanvasAncestorContext.Provider, { value: paintState, children: [(0, jsx_runtime_1.jsx)("canvas", { ref: paintTargetMode === 'copied' ? canvas2dRef : setVisibleCanvasRef, width: canvasWidth, height: canvasHeight, style: paintTargetMode === 'copied'
                     ? {
                         ...canvasStyle,
                         position: 'absolute',
@@ -548,22 +610,24 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, e
                         visibility: 'hidden',
                         pointerEvents: 'none',
                     }
-                    : canvasStyle, children: [
-                    jsx_runtime_1.jsx("div", { ref: divRef, style: paintTargetMode === 'copied'
-                            ? { ...innerStyle, visibility: 'visible' }
-                            : innerStyle, children: children }), canvasSiblings] }, canvasSizeKey), paintTargetMode === 'copied' ? (jsx_runtime_1.jsx("canvas", { ref: setVisibleCanvasRef, width: canvasWidth, height: canvasHeight, style: canvasStyle }, `output-${canvasSizeKey}`)) : null] }));
+                    : canvasStyle, children: (0, jsx_runtime_1.jsxs)(DefaultPremountContext_js_1.DefaultPremountContext.Provider, { value: 0, children: [(0, jsx_runtime_1.jsx)("div", { ref: divRef, style: paintTargetMode === 'copied'
+                                ? { ...innerStyle, visibility: 'visible' }
+                                : innerStyle, children: children }), canvasSiblings] }) }, canvasSizeKey), paintTargetMode === 'copied' ? ((0, jsx_runtime_1.jsx)("canvas", { ref: setVisibleCanvasRef, width: canvasWidth, height: canvasHeight, style: canvasStyle }, `output-${canvasSizeKey}`)) : null] }));
 });
 HtmlInCanvasContent.displayName = 'HtmlInCanvasContent';
 // Subscribe to frame changes only while rendering. Preview keeps relying on
 // the browser's paints and does not need a capture barrier on every frame.
 const HtmlInCanvasContentForRendering = (0, react_1.forwardRef)((props, ref) => {
     const frame = (0, use_current_frame_js_1.useCurrentFrame)();
-    return jsx_runtime_1.jsx(HtmlInCanvasContent, { ...props, ref: ref, renderFrame: frame });
+    return (0, jsx_runtime_1.jsx)(HtmlInCanvasContent, { ...props, ref: ref, renderFrame: frame });
 });
 HtmlInCanvasContentForRendering.displayName = 'HtmlInCanvasContentForRendering';
-const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, effects = [], effectsOutputSize, children, onPaint, onInit, pixelDensity, _remotionInternalCanvasSiblings, controls, style, cropLeft, cropRight, cropTop, cropBottom, durationInFrames, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, name, ...sequenceProps }, ref) => {
+const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, effects = [], effectsOutputSize, children, onPaint, onInit, pixelDensity, _remotionInternalCanvasSiblings, _remotionInternalFallbackLabel = 'Effects are not visible', controls, style, cropLeft, cropRight, cropTop, cropBottom, durationInFrames, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, name, ...sequenceProps }, ref) => {
     var _a;
     const { isRendering } = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
+    const unsupportedMessage = (0, exports.useHtmlInCanvasUnsupportedMessage)();
+    assertHtmlInCanvasDimensions(width, height);
+    resolveHtmlInCanvasPixelDensity(pixelDensity);
     const Content = isRendering
         ? HtmlInCanvasContentForRendering
         : HtmlInCanvasContent;
@@ -600,7 +664,7 @@ const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, effects = []
         style: premountingStyle,
         componentName: '<HtmlInCanvas />',
     });
-    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, _remotionInternalIsPremounting: premountingActive, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : '<HtmlInCanvas>', _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/remotion/html-in-canvas", controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, ...sequenceProps, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: jsx_runtime_1.jsx(Content, { ref: setCanvasRef, renderFrame: null, width: width, height: height, effects: effects, effectsOutputSize: effectsOutputSize !== null && effectsOutputSize !== void 0 ? effectsOutputSize : null, onPaint: onPaint, onInit: onInit, pixelDensity: pixelDensity, canvasSiblings: _remotionInternalCanvasSiblings !== null && _remotionInternalCanvasSiblings !== void 0 ? _remotionInternalCanvasSiblings : null, controls: controls, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, children: children }) }) }));
+    return ((0, jsx_runtime_1.jsx)(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, _remotionInternalIsPremounting: premountingActive, children: (0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { layout: "none", durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : '<HtmlInCanvas>', _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/remotion/html-in-canvas", controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, ...sequenceProps, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: !isRendering && unsupportedMessage !== null ? ((0, jsx_runtime_1.jsx)(HtmlInCanvasFallback_js_1.HtmlInCanvasFallback, { style: { width, height, ...croppedStyle }, label: _remotionInternalFallbackLabel, children: (0, jsx_runtime_1.jsx)(DefaultPremountContext_js_1.DefaultPremountContext.Provider, { value: 0, children: (0, jsx_runtime_1.jsx)("div", { style: { width, height }, children: children }) }) })) : ((0, jsx_runtime_1.jsx)(Content, { ref: setCanvasRef, renderFrame: null, width: width, height: height, effects: effects, effectsOutputSize: effectsOutputSize !== null && effectsOutputSize !== void 0 ? effectsOutputSize : null, onPaint: onPaint, onInit: onInit, pixelDensity: pixelDensity, canvasSiblings: _remotionInternalCanvasSiblings !== null && _remotionInternalCanvasSiblings !== void 0 ? _remotionInternalCanvasSiblings : null, controls: controls, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, children: children })) }) }));
 });
 HtmlInCanvasInner.displayName = 'HtmlInCanvas';
 exports.htmlInCanvasSchema = {

package/dist/cjs/HtmlInCanvasFallback.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const HtmlInCanvasFallback: React.FC<{
+    readonly children: React.ReactNode;
+    readonly style: React.CSSProperties;
+    readonly label: string;
+}>;

package/dist/cjs/HtmlInCanvasFallback.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HtmlInCanvasFallback = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const use_current_scale_js_1 = require("./use-current-scale.js");
+const HtmlInCanvasFallback = ({ children, style, label }) => {
+    const currentScale = (0, use_current_scale_js_1.useCurrentScale)({ dontThrowIfOutsideOfRemotion: true });
+    const scale = currentScale > 0 ? currentScale : 1;
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative', ...style }, children: [children, (0, jsx_runtime_1.jsxs)("div", { className: "css-reset", style: {
+                    position: 'absolute',
+                    top: 8 / scale,
+                    right: 8 / scale,
+                    zIndex: 1000,
+                    // Cancel the preview zoom while keeping the badge inside its component.
+                    transform: `scale(${1 / scale})`,
+                    transformOrigin: 'top right',
+                    maxWidth: `calc(${scale * 100}% - 16px)`,
+                    padding: '8px 10px',
+                    borderRadius: 6,
+                    border: '1px solid #7f3540',
+                    backgroundColor: '#2b171c',
+                    boxShadow: '0 2px 8px #0003',
+                    pointerEvents: 'none',
+                    textAlign: 'left',
+                }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                            fontFamily: 'Arial, Helvetica, sans-serif',
+                            fontSize: 12,
+                            fontWeight: 600,
+                            lineHeight: 1.5,
+                            color: '#ffabb5',
+                        }, children: "HTML-in-canvas is not available" }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            fontFamily: 'Arial, Helvetica, sans-serif',
+                            fontSize: 11,
+                            fontWeight: 400,
+                            lineHeight: 1.5,
+                            color: '#e8bdc3',
+                        }, children: label })] })] }));
+};
+exports.HtmlInCanvasFallback = HtmlInCanvasFallback;

package/dist/cjs/IFrame.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 export declare const IFrame: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLIFrameElement> & React.IframeHTMLAttributes<HTMLIFrameElement> & {
-    readonly delayRenderRetries?: number | undefined;
-    readonly delayRenderTimeoutInMilliseconds?: number | undefined;
+    readonly delayRenderRetries?: number;
+    readonly delayRenderTimeoutInMilliseconds?: number;
 }, "ref"> & React.RefAttributes<HTMLIFrameElement>>;

package/dist/cjs/IFrame.js

@@ -56,7 +56,7 @@ const IFrameRefForwarding = ({ onLoad, onError, delayRenderRetries, delayRenderT
             console.error('Error loading iframe:', e, 'Handle the event using the onError() prop to make this message disappear.');
         }
     }, [onError, continueRender, src, srcDoc]);
-    return (jsx_runtime_1.jsx("iframe", { referrerPolicy: "strict-origin-when-cross-origin", ...props, ref: ref, onError: didGetError, onLoad: didLoad }));
+    return ((0, jsx_runtime_1.jsx)("iframe", { referrerPolicy: "strict-origin-when-cross-origin", ...props, ref: ref, onError: didGetError, onLoad: didLoad }));
 };
 /*
  * @description The <IFrame /> can be used like a regular <iframe> HTML tag.