remotion 4.0.470 → 4.0.472

package/dist/cjs/AbsoluteFill.js

@@ -106,7 +106,7 @@ const AbsoluteFillRefForwarding = (props, ref) => {
             ...style,
         };
     }, [other.className, style]);
-    return (0, jsx_runtime_1.jsx)("div", { ref: ref, style: actualStyle, ...other });
+    return jsx_runtime_1.jsx("div", { ref: ref, style: actualStyle, ...other });
 };
 /*
  * @description A helper component which renders an absolutely positioned <div> element with full width, height, and flex display suited for content layering.

package/dist/cjs/CanUseRemotionHooks.js

@@ -5,6 +5,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 exports.CanUseRemotionHooks = (0, react_1.createContext)(false);
 const CanUseRemotionHooksProvider = ({ children }) => {
-    return ((0, jsx_runtime_1.jsx)(exports.CanUseRemotionHooks.Provider, { value: true, children: children }));
+    return (jsx_runtime_1.jsx(exports.CanUseRemotionHooks.Provider, { value: true, children: children }));
 };
 exports.CanUseRemotionHooksProvider = CanUseRemotionHooksProvider;

package/dist/cjs/Composition.d.ts

@@ -59,5 +59,5 @@ export type CompositionProps<Schema extends AnyZodObject, Props extends Record<s
     readonly id: string;
     readonly schema?: Schema;
 } & CompositionCalculateMetadataOrExplicit<Schema, Props> & CompProps<Props> & PropsIfHasProps<Schema, Props>;
-export declare const Composition: <Schema extends AnyZodObject, Props extends Record<string, unknown>>(props: CompositionProps<Schema, Props>) => import("react/jsx-runtime.js").JSX.Element | null;
+export declare const Composition: <Schema extends AnyZodObject, Props extends Record<string, unknown>>(props: CompositionProps<Schema, Props>) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/cjs/Composition.js

@@ -116,7 +116,7 @@ const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultPro
                 resolved.type !== 'success-and-refreshing')) {
             return null;
         }
-        return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(CompositionErrorBoundary_js_1.CompositionErrorBoundary, { onError: onError, onClear: onClear, children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(loading_indicator_js_1.Loading, {}), children: (0, jsx_runtime_1.jsx)(Comp, { ...((_c = resolved.result.props) !== null && _c !== void 0 ? _c : {}) }) }) }) }), (0, portal_node_js_1.portalNode)());
+        return (0, react_dom_1.createPortal)(jsx_runtime_1.jsx(CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider, { children: jsx_runtime_1.jsx(CompositionErrorBoundary_js_1.CompositionErrorBoundary, { onError: onError, onClear: onClear, children: jsx_runtime_1.jsx(react_1.Suspense, { fallback: jsx_runtime_1.jsx(loading_indicator_js_1.Loading, {}), children: jsx_runtime_1.jsx(Comp, { ...((_c = resolved.result.props) !== null && _c !== void 0 ? _c : {}) }) }) }) }), (0, portal_node_js_1.portalNode)());
     }
     if (environment.isRendering &&
         video &&
@@ -128,7 +128,7 @@ const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultPro
                 resolved.type !== 'success-and-refreshing')) {
             return null;
         }
-        return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(Fallback, {}), children: (0, jsx_runtime_1.jsx)(Comp, { ...((_d = resolved.result.props) !== null && _d !== void 0 ? _d : {}) }) }) }), (0, portal_node_js_1.portalNode)());
+        return (0, react_dom_1.createPortal)(jsx_runtime_1.jsx(CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider, { children: jsx_runtime_1.jsx(react_1.Suspense, { fallback: jsx_runtime_1.jsx(Fallback, {}), children: jsx_runtime_1.jsx(Comp, { ...((_d = resolved.result.props) !== null && _d !== void 0 ? _d : {}) }) }) }), (0, portal_node_js_1.portalNode)());
     }
     return null;
 };
@@ -142,6 +142,6 @@ const Composition = (props) => {
         return null;
     }
     // @ts-expect-error
-    return (0, jsx_runtime_1.jsx)(InnerComposition, { ...props });
+    return jsx_runtime_1.jsx(InnerComposition, { ...props });
 };
 exports.Composition = Composition;

package/dist/cjs/CompositionErrorBoundary.js

@@ -18,11 +18,8 @@ const getHot = () => {
     }
 };
 class CompositionErrorBoundary extends react_1.default.Component {
-    constructor() {
-        super(...arguments);
-        this.state = { hasError: false };
-        this.hmrStatusHandler = null;
-    }
+    state = { hasError: false };
+    hmrStatusHandler = null;
     static getDerivedStateFromError() {
         return { hasError: true };
     }

package/dist/cjs/CompositionManager.d.ts

@@ -54,6 +54,7 @@ export type SequenceControls = {
     schema: SequenceSchema;
     currentRuntimeValueDotNotation: Record<string, unknown>;
     overrideId: string;
+    supportsEffects: boolean;
 };
 export type TSequence = {
     from: number;
@@ -72,6 +73,7 @@ export type TSequence = {
     controls: SequenceControls | null;
     refForOutline: React.RefObject<HTMLElement | null> | null;
     effects: readonly EffectDefinition<unknown>[];
+    isInsideSeries: boolean;
 } & EnhancedTSequenceData;
 export type AudioOrVideoAsset = {
     type: 'audio' | 'video';

package/dist/cjs/CompositionManagerContext.d.ts

@@ -25,7 +25,7 @@ export type CanvasContent = {
 export type CompositionManagerSetters = {
     registerComposition: <Schema extends AnyZodObject, Props extends Record<string, unknown>>(comp: TComposition<Schema, Props>) => void;
     unregisterComposition: (name: string) => void;
-    registerFolder: (name: string, parent: string | null, nonce: NonceHistory) => void;
+    registerFolder: (name: string, parent: string | null, nonce: NonceHistory, stack: string | null) => void;
     unregisterFolder: (name: string, parent: string | null) => void;
     setCanvasContent: React.Dispatch<React.SetStateAction<CanvasContent | null>>;
     onlyRenderComposition: string | null;

package/dist/cjs/CompositionManagerProvider.d.ts

@@ -2,9 +2,9 @@ import { type AnyComposition } from './CompositionManager';
 import type { CanvasContent } from './CompositionManagerContext';
 import type { BaseMetadata } from './CompositionManagerContext.js';
 export declare const CompositionManagerProvider: ({ children, onlyRenderComposition, currentCompositionMetadata, initialCompositions, initialCanvasContent, }: {
-    readonly children: React.ReactNode;
+    readonly children: import("react").ReactNode;
     readonly onlyRenderComposition: string | null;
     readonly currentCompositionMetadata: BaseMetadata | null;
     readonly initialCompositions: AnyComposition[];
     readonly initialCanvasContent: CanvasContent | null;
-}) => import("react/jsx-runtime.js").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/CompositionManagerProvider.js

@@ -31,7 +31,7 @@ const CompositionManagerProvider = ({ children, onlyRenderComposition, currentCo
             return comps.filter((c) => c.id !== id);
         });
     }, []);
-    const registerFolder = (0, react_1.useCallback)((name, parent, nonce) => {
+    const registerFolder = (0, react_1.useCallback)((name, parent, nonce, stack) => {
         setFolders((prevFolders) => {
             return [
                 ...prevFolders,
@@ -39,6 +39,7 @@ const CompositionManagerProvider = ({ children, onlyRenderComposition, currentCo
                     name,
                     parent,
                     nonce,
+                    stack,
                 },
             ];
         });
@@ -77,6 +78,6 @@ const CompositionManagerProvider = ({ children, onlyRenderComposition, currentCo
             canvasContent,
         };
     }, [compositions, folders, currentCompositionMetadata, canvasContent]);
-    return ((0, jsx_runtime_1.jsx)(CompositionManagerContext_1.CompositionManager.Provider, { value: compositionManagerContextValue, children: (0, jsx_runtime_1.jsx)(CompositionManagerContext_1.CompositionSetters.Provider, { value: compositionManagerSetters, children: children }) }));
+    return (jsx_runtime_1.jsx(CompositionManagerContext_1.CompositionManager.Provider, { value: compositionManagerContextValue, children: jsx_runtime_1.jsx(CompositionManagerContext_1.CompositionSetters.Provider, { value: compositionManagerSetters, children: children }) }));
 };
 exports.CompositionManagerProvider = CompositionManagerProvider;

package/dist/cjs/EditorProps.d.ts

@@ -13,9 +13,9 @@ export declare const EditorPropsContext: React.Context<EditorPropsContextType>;
 export declare const timeValueRef: React.RefObject<{
     goToFrame: () => void;
     seek: (newFrame: number) => void;
-    play: (e?: SyntheticEvent | PointerEvent) => void;
+    play: (e?: PointerEvent | SyntheticEvent<Element, Event> | undefined) => void;
     pause: () => void;
-    toggle: (e?: SyntheticEvent | PointerEvent) => void;
+    toggle: (e?: PointerEvent | SyntheticEvent<Element, Event> | undefined) => void;
 } | null>;
 export declare const EditorPropsProvider: React.FC<{
     readonly children: React.ReactNode;

package/dist/cjs/EditorProps.js

@@ -59,6 +59,6 @@ const EditorPropsProvider = ({ children }) => {
     const ctx = (0, react_1.useMemo)(() => {
         return { props, updateProps };
     }, [props, updateProps]);
-    return ((0, jsx_runtime_1.jsx)(exports.EditorPropsContext.Provider, { value: ctx, children: children }));
+    return (jsx_runtime_1.jsx(exports.EditorPropsContext.Provider, { value: ctx, children: children }));
 };
 exports.EditorPropsProvider = EditorPropsProvider;

package/dist/cjs/Folder.d.ts

@@ -4,6 +4,7 @@ export type TFolder = {
     name: string;
     parent: string | null;
     nonce: NonceHistory;
+    stack: string | null;
 };
 type FolderContextType = {
     folderName: string | null;

package/dist/cjs/Folder.js

@@ -15,10 +15,13 @@ exports.FolderContext = (0, react_1.createContext)({
  * @description By wrapping a <Composition /> inside a <Folder />, you can visually categorize it in your sidebar, should you have many compositions.
  * @see [Documentation](https://remotion.dev/docs/folder)
  */
-const Folder = ({ name, children }) => {
+const Folder = (props) => {
+    var _a;
+    const { name, children } = props;
     const parent = (0, react_1.useContext)(exports.FolderContext);
     const { registerFolder, unregisterFolder } = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionSetters);
     const nonce = (0, nonce_js_1.useNonce)();
+    const stack = (_a = props.stack) !== null && _a !== void 0 ? _a : null;
     (0, validate_folder_name_js_1.validateFolderName)(name);
     const parentNameArr = [parent.parentName, parent.folderName].filter(truthy_js_1.truthy);
     const parentName = parentNameArr.length === 0 ? null : parentNameArr.join('/');
@@ -29,7 +32,7 @@ const Folder = ({ name, children }) => {
         };
     }, [name, parentName]);
     (0, react_1.useEffect)(() => {
-        registerFolder(name, parentName, nonce.get());
+        registerFolder(name, parentName, nonce.get(), stack);
         return () => {
             unregisterFolder(name, parentName);
         };
@@ -40,7 +43,8 @@ const Folder = ({ name, children }) => {
         registerFolder,
         unregisterFolder,
         nonce,
+        stack,
     ]);
-    return ((0, jsx_runtime_1.jsx)(exports.FolderContext.Provider, { value: value, children: children }));
+    return (jsx_runtime_1.jsx(exports.FolderContext.Provider, { value: value, children: children }));
 };
 exports.Folder = Folder;

package/dist/cjs/HtmlInCanvas.d.ts

@@ -44,6 +44,7 @@ export type HtmlInCanvasOnPaintParams = {
     readonly canvas: OffscreenCanvas;
     readonly element: HTMLDivElement;
     readonly elementImage: ElementImage;
+    readonly pixelDensity: number;
 };
 export declare const isHtmlInCanvasSupported: () => boolean;
 /** Shown when {@link isHtmlInCanvasSupported} is false: APIs are absent (old Chrome and/or flag off). */
@@ -51,7 +52,8 @@ export declare const HTML_IN_CANVAS_UNSUPPORTED_MESSAGE = "HTML in Canvas is not
 export type HtmlInCanvasOnPaint = (params: HtmlInCanvasOnPaintParams) => void | Promise<void>;
 export type HtmlInCanvasOnInitCleanup = () => void;
 export type HtmlInCanvasOnInit = (params: HtmlInCanvasOnPaintParams) => HtmlInCanvasOnInitCleanup | Promise<HtmlInCanvasOnInitCleanup>;
-export type HtmlInCanvasProps = Omit<SequenceProps, 'children' | 'durationInFrames' | keyof LayoutAndStyle | '_remotionInternalEffects'> & Omit<AbsoluteFillLayout, 'layout' | 'styleWhilePostmounted' | 'postmountFor' | 'premountFor' | 'styleWhilePremounted'> & {
+export type HtmlInCanvasPixelDensity = number;
+export type HtmlInCanvasProps = Omit<SequenceProps, 'children' | 'durationInFrames' | keyof LayoutAndStyle | '_remotionInternalEffects' | '_remotionInternalRefForOutline'> & Omit<AbsoluteFillLayout, 'layout' | 'styleWhilePostmounted' | 'postmountFor' | 'premountFor' | 'styleWhilePremounted'> & {
     readonly durationInFrames?: number;
     readonly width: number;
     readonly height: number;
@@ -59,7 +61,17 @@ export type HtmlInCanvasProps = Omit<SequenceProps, 'children' | 'durationInFram
     readonly children: React.ReactNode;
     readonly onPaint?: HtmlInCanvasOnPaint;
     readonly onInit?: HtmlInCanvasOnInit;
+    readonly pixelDensity?: HtmlInCanvasPixelDensity;
 };
-export declare const HtmlInCanvas: React.ForwardRefExoticComponent<HtmlInCanvasProps & React.RefAttributes<HTMLCanvasElement>> & {
-    readonly isSupported: typeof isHtmlInCanvasSupported;
+export declare const HtmlInCanvas: React.ForwardRefExoticComponent<Omit<SequenceProps, "_remotionInternalEffects" | "_remotionInternalRefForOutline" | "children" | "durationInFrames" | "layout"> & Omit<AbsoluteFillLayout, "layout" | "postmountFor" | "premountFor" | "styleWhilePostmounted" | "styleWhilePremounted"> & {
+    readonly durationInFrames?: number | undefined;
+    readonly width: number;
+    readonly height: number;
+    readonly effects?: EffectsProp | undefined;
+    readonly children: React.ReactNode;
+    readonly onPaint?: HtmlInCanvasOnPaint | undefined;
+    readonly onInit?: HtmlInCanvasOnInit | undefined;
+    readonly pixelDensity?: number | undefined;
+} & React.RefAttributes<HTMLCanvasElement>> & {
+    readonly isSupported: () => boolean;
 };

package/dist/cjs/HtmlInCanvas.js

@@ -47,6 +47,25 @@ function assertHtmlInCanvasDimensions(width, height) {
         throw new Error(`HtmlInCanvas: \`height\` must be a positive integer. Received: ${String(height)}.`);
     }
 }
+function resolveHtmlInCanvasPixelDensity(pixelDensity) {
+    if (pixelDensity === undefined) {
+        return 1;
+    }
+    if (typeof pixelDensity !== 'number' ||
+        !Number.isFinite(pixelDensity) ||
+        pixelDensity <= 0) {
+        throw new Error(`HtmlInCanvas: \`pixelDensity\` must be a positive finite number. Received: ${String(pixelDensity)}.`);
+    }
+    return pixelDensity;
+}
+const resizeOffscreenCanvas = ({ offscreen, width, height, }) => {
+    if (offscreen.width !== width) {
+        offscreen.width = width;
+    }
+    if (offscreen.height !== height) {
+        offscreen.height = height;
+    }
+};
 const defaultOnPaint = ({ canvas, element, elementImage, }) => {
     const ctx = canvas.getContext('2d');
     if (!ctx) {
@@ -58,10 +77,13 @@ const defaultOnPaint = ({ canvas, element, elementImage, }) => {
 };
 /* eslint-enable react/require-default-props */
 const HtmlInCanvasAncestorContext = (0, react_1.createContext)(false);
-const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, children, onPaint, onInit, controls, style }, ref) => {
+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);
     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)();
     if (!(0, exports.isHtmlInCanvasSupported)()) {
         cancelRender(new Error(exports.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE));
@@ -69,7 +91,7 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
     const canvas2dRef = (0, react_1.useRef)(null);
     const offscreenRef = (0, react_1.useRef)(null);
     const divRef = (0, react_1.useRef)(null);
-    const canvasSizeKey = `${width}x${height}`;
+    const canvasSizeKey = `${width}x${height}@${resolvedPixelDensity}`;
     const setLayoutCanvasRef = (0, react_1.useCallback)((node) => {
         canvas2dRef.current = node;
         if (typeof ref === 'function') {
@@ -105,8 +127,11 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
         if (!offscreen) {
             throw new Error('HtmlInCanvas: offscreen canvas not ready (transferControlToOffscreen failed or canvas is remounting)');
         }
-        offscreen.width = width;
-        offscreen.height = height;
+        resizeOffscreenCanvas({
+            offscreen,
+            width: canvasWidth,
+            height: canvasHeight,
+        });
         try {
             const placeholderCanvas = canvas2dRef.current;
             if (!placeholderCanvas) {
@@ -135,6 +160,7 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
                         canvas: offscreen,
                         element,
                         elementImage: initImage,
+                        pixelDensity: resolvedPixelDensity,
                     });
                     if (typeof cleanup !== 'function') {
                         throw new Error('HtmlInCanvas: when `onInit` is provided, it must return a cleanup function, or a Promise that resolves to one.');
@@ -153,21 +179,29 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
                 canvas: offscreen,
                 element,
                 elementImage: elImage,
+                pixelDensity: resolvedPixelDensity,
             });
             await (0, run_effect_chain_js_1.runEffectChain)({
-                state: chainState.get(width, height),
+                state: chainState.get(canvasWidth, canvasHeight),
                 source: offscreen,
                 effects: effectsRef.current,
                 output: offscreen,
-                width,
-                height,
+                width: canvasWidth,
+                height: canvasHeight,
             });
             continueRender(handle);
         }
         catch (error) {
             cancelRender(error);
         }
-    }, [chainState, continueRender, cancelRender, width, height]);
+    }, [
+        canvasHeight,
+        canvasWidth,
+        chainState,
+        continueRender,
+        cancelRender,
+        resolvedPixelDensity,
+    ]);
     // Transfer control once per layout canvas instance, then listen for paint on
     // the placeholder (capture) while drawing on the linked offscreen surface.
     (0, react_1.useLayoutEffect)(() => {
@@ -178,8 +212,11 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
         placeholder.layoutSubtree = true;
         const offscreen = placeholder.transferControlToOffscreen();
         offscreenRef.current = offscreen;
-        offscreen.width = width;
-        offscreen.height = height;
+        resizeOffscreenCanvas({
+            offscreen,
+            width: canvasWidth,
+            height: canvasHeight,
+        });
         initializedRef.current = false;
         unmountedRef.current = false;
         placeholder.addEventListener('paint', onPaintCb);
@@ -192,7 +229,7 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
             (_a = onInitCleanupRef.current) === null || _a === void 0 ? void 0 : _a.call(onInitCleanupRef);
             onInitCleanupRef.current = null;
         };
-    }, [onPaintCb, cancelRender, width, height]);
+    }, [onPaintCb, cancelRender, canvasWidth, canvasHeight]);
     const onPaintChangedRef = (0, react_1.useRef)(false);
     (0, react_1.useLayoutEffect)(() => {
         var _a;
@@ -225,26 +262,50 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
             height,
         };
     }, [width, height]);
+    const canvasStyle = (0, react_1.useMemo)(() => {
+        return {
+            width,
+            height,
+            ...(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 ((0, jsx_runtime_1.jsx)(HtmlInCanvasAncestorContext.Provider, { value: true, children: (0, jsx_runtime_1.jsx)("canvas", { ref: setLayoutCanvasRef, width: width, height: height, style: style, children: (0, jsx_runtime_1.jsx)("div", { ref: divRef, style: innerStyle, children: children }) }, canvasSizeKey) }));
+    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) }));
 });
 HtmlInCanvasContent.displayName = 'HtmlInCanvasContent';
-const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, effects = [], children, onPaint, onInit, _experimentalControls: controls, style, durationInFrames, name, ...sequenceProps }, ref) => {
+const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, effects = [], children, onPaint, onInit, pixelDensity, _experimentalControls: controls, style, durationInFrames, name, ...sequenceProps }, ref) => {
     const { durationInFrames: videoDuration } = (0, use_video_config_js_1.useVideoConfig)();
     const resolvedDuration = durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : videoDuration;
     const memoizedEffectDefinitions = (0, use_memoized_effects_js_1.useMemoizedEffectDefinitions)(effects);
-    return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { durationInFrames: resolvedDuration, name: name !== null && name !== void 0 ? name : '<HtmlInCanvas>', _remotionInternalDocumentationLink: name === undefined
+    const actualRef = (0, react_1.useRef)(null);
+    const setCanvasRef = (0, react_1.useCallback)((node) => {
+        actualRef.current = node;
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current =
+                node;
+        }
+    }, [ref]);
+    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { durationInFrames: resolvedDuration, name: name !== null && name !== void 0 ? name : '<HtmlInCanvas>', _remotionInternalDocumentationLink: name === undefined
             ? 'https://www.remotion.dev/docs/remotion/html-in-canvas'
-            : undefined, _experimentalControls: controls, _remotionInternalEffects: memoizedEffectDefinitions, layout: "none", ...sequenceProps, children: (0, jsx_runtime_1.jsx)(HtmlInCanvasContent, { ref: ref, width: width, height: height, effects: effects, onPaint: onPaint, onInit: onInit, controls: controls, style: style, children: children }) }));
+            : undefined, _experimentalControls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalRefForOutline: actualRef, layout: "none", ...sequenceProps, children: jsx_runtime_1.jsx(HtmlInCanvasContent, { ref: setCanvasRef, width: width, height: height, effects: effects, onPaint: onPaint, onInit: onInit, pixelDensity: pixelDensity, controls: controls, style: style, children: children }) }));
 });
 HtmlInCanvasInner.displayName = 'HtmlInCanvas';
 const htmlInCanvasSchema = {
+    durationInFrames: sequence_field_schema_js_1.durationInFramesField,
+    from: sequence_field_schema_js_1.fromField,
     ...sequence_field_schema_js_1.sequenceVisualStyleSchema,
     hidden: sequence_field_schema_js_1.hiddenField,
 };
-const HtmlInCanvasWrapped = (0, wrap_in_schema_js_1.wrapInSchema)(HtmlInCanvasInner, htmlInCanvasSchema);
+const HtmlInCanvasWrapped = (0, wrap_in_schema_js_1.wrapInSchema)({
+    Component: HtmlInCanvasInner,
+    schema: htmlInCanvasSchema,
+    supportsEffects: true,
+});
 exports.HtmlInCanvas = Object.assign(HtmlInCanvasWrapped, {
     isSupported: exports.isHtmlInCanvasSupported,
 });

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;
-    readonly delayRenderTimeoutInMilliseconds?: number;
+    readonly delayRenderRetries?: number | undefined;
+    readonly delayRenderTimeoutInMilliseconds?: number | undefined;
 }, "ref"> & React.RefAttributes<HTMLIFrameElement>>;

package/dist/cjs/IFrame.js

@@ -24,7 +24,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.');
         }
     }, [handle, onError, continueRender]);
-    return ((0, jsx_runtime_1.jsx)("iframe", { referrerPolicy: "strict-origin-when-cross-origin", ...props, ref: ref, onError: didGetError, onLoad: didLoad }));
+    return (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.

package/dist/cjs/Img.d.ts

@@ -18,7 +18,6 @@ export type ImgProps = NativeImgProps & {
     readonly stack?: string;
 } & Pick<SequenceProps, 'durationInFrames' | 'from' | 'hidden'>;
 export declare const imgSchema: {
-    readonly hidden: import("./sequence-field-schema.js").SequenceFieldSchema;
     readonly 'style.translate': {
         readonly type: "translate";
         readonly step: 1;
@@ -26,7 +25,7 @@ export declare const imgSchema: {
         readonly description: "Offset";
     };
     readonly 'style.scale': {
-        readonly type: "number";
+        readonly type: "scale";
         readonly min: 0.05;
         readonly max: 100;
         readonly step: 0.01;
@@ -34,7 +33,7 @@ export declare const imgSchema: {
         readonly description: "Scale";
     };
     readonly 'style.rotate': {
-        readonly type: "rotation";
+        readonly type: "rotation-css";
         readonly step: 1;
         readonly default: "0deg";
         readonly description: "Rotation";
@@ -46,21 +45,36 @@ export declare const imgSchema: {
         readonly step: 0.01;
         readonly default: 1;
         readonly description: "Opacity";
+        readonly hiddenFromList: false;
+    };
+    readonly durationInFrames: {
+        readonly type: "number";
+        readonly default: undefined;
+        readonly min: 1;
+        readonly step: 1;
+        readonly hiddenFromList: true;
     };
+    readonly from: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly step: 1;
+        readonly hiddenFromList: true;
+    };
+    readonly hidden: import("./sequence-field-schema.js").SequenceFieldSchema;
 };
 export declare const Img: React.ComponentType<NativeImgProps & {
-    readonly maxRetries?: number;
-    readonly pauseWhenLoading?: boolean;
-    readonly delayRenderRetries?: number;
-    readonly delayRenderTimeoutInMilliseconds?: number;
-    readonly onImageFrame?: (imageElement: HTMLImageElement) => void;
+    readonly maxRetries?: number | undefined;
+    readonly pauseWhenLoading?: boolean | undefined;
+    readonly delayRenderRetries?: number | undefined;
+    readonly delayRenderTimeoutInMilliseconds?: number | undefined;
+    readonly onImageFrame?: ((imageElement: HTMLImageElement) => void) | undefined;
     readonly src: string;
-    readonly effects?: EffectsProp;
-    readonly showInTimeline?: boolean;
-    readonly name?: string;
+    readonly effects?: EffectsProp | undefined;
+    readonly showInTimeline?: boolean | undefined;
+    readonly name?: string | undefined;
     /**
      * @deprecated For internal use only
      */
-    readonly stack?: string;
-} & Pick<SequenceProps, "hidden" | "durationInFrames" | "from">>;
+    readonly stack?: string | undefined;
+} & Pick<SequenceProps, "durationInFrames" | "from" | "hidden">>;
 export {};