remotion 4.0.471 → 4.0.472

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.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,
                 },
             ];
         });

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,6 +43,7 @@ const Folder = ({ name, children }) => {
         registerFolder,
         unregisterFolder,
         nonce,
+        stack,
     ]);
     return (jsx_runtime_1.jsx(exports.FolderContext.Provider, { value: value, children: children }));
 };

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,6 +52,7 @@ 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 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;
@@ -59,6 +61,7 @@ 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<Omit<SequenceProps, "_remotionInternalEffects" | "_remotionInternalRefForOutline" | "children" | "durationInFrames" | "layout"> & Omit<AbsoluteFillLayout, "layout" | "postmountFor" | "premountFor" | "styleWhilePostmounted" | "styleWhilePremounted"> & {
     readonly durationInFrames?: number | undefined;
@@ -68,6 +71,7 @@ export declare const HtmlInCanvas: React.ForwardRefExoticComponent<Omit<Sequence
     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,13 +262,20 @@ 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 (jsx_runtime_1.jsx(HtmlInCanvasAncestorContext.Provider, { value: true, children: jsx_runtime_1.jsx("canvas", { ref: setLayoutCanvasRef, width: width, height: height, style: style, children: 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);
@@ -248,14 +292,20 @@ const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, effects = []
     }, [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, _remotionInternalRefForOutline: actualRef, layout: "none", ...sequenceProps, children: jsx_runtime_1.jsx(HtmlInCanvasContent, { ref: setCanvasRef, 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/Img.d.ts

@@ -25,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;
@@ -33,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";
@@ -45,6 +45,20 @@ 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;
 };

package/dist/cjs/Img.js

@@ -191,6 +191,8 @@ const NativeImgInner = ({ hidden, name, stack, showInTimeline, src, from, durati
 };
 const CanvasImageWithPrivateProps = index_js_1.CanvasImage;
 exports.imgSchema = {
+    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,
 };
@@ -258,5 +260,9 @@ const ImgInner = ({ effects = [], ref, hidden, name, stack, showInTimeline, src,
  * @description Works just like a regular HTML img tag. When you use the <Img> tag, Remotion will ensure that the image is loaded before rendering the frame.
  * @see [Documentation](https://remotion.dev/docs/img)
  */
-exports.Img = (0, wrap_in_schema_js_1.wrapInSchema)(ImgInner, exports.imgSchema);
+exports.Img = (0, wrap_in_schema_js_1.wrapInSchema)({
+    Component: ImgInner,
+    schema: exports.imgSchema,
+    supportsEffects: true,
+});
 (0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(exports.Img);

package/dist/cjs/Sequence.js

@@ -11,12 +11,14 @@ const PremountContext_js_1 = require("./PremountContext.js");
 const sequence_field_schema_js_1 = require("./sequence-field-schema.js");
 const SequenceContext_js_1 = require("./SequenceContext.js");
 const SequenceManager_js_1 = require("./SequenceManager.js");
+const is_inside_series_js_1 = require("./series/is-inside-series.js");
 const timeline_position_state_js_1 = require("./timeline-position-state.js");
 const use_current_frame_1 = require("./use-current-frame");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
 const use_video_config_js_1 = require("./use-video-config.js");
 const v5_flag_js_1 = require("./v5-flag.js");
 const wrap_in_schema_js_1 = require("./wrap-in-schema.js");
+const EMPTY_EFFECTS = [];
 const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity, children, name, height, width, showInTimeline = true, hidden = false, _experimentalControls: controls, _remotionInternalEffects, _remotionInternalLoopDisplay: loopDisplay, _remotionInternalStack: stack, _remotionInternalDocumentationLink: documentationLink, _remotionInternalPremountDisplay: premountDisplay, _remotionInternalPostmountDisplay: postmountDisplay, _remotionInternalIsMedia: isMedia, _remotionInternalRefForOutline: refForOutline, ...other }, ref) => {
     var _a;
     const { layout = 'absolute-fill' } = other;
@@ -122,6 +124,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
     }, [name]);
     const resolvedDocumentationLink = documentationLink !== null && documentationLink !== void 0 ? documentationLink : (name === undefined ? 'https://www.remotion.dev/docs/sequence' : null);
     const env = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
+    const isInsideSeries = (0, react_1.useContext)(is_inside_series_js_1.IsInsideSeriesContext);
     const inheritedStack = (_a = other === null || other === void 0 ? void 0 : other.stack) !== null && _a !== void 0 ? _a : null;
     // Our assumption: Stack doesnt' change. After we symbolicate we assign it a nodePath
     // and if it changes, it would lead to-remounting of the sequence.
@@ -137,7 +140,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
                 registerSequence({
                     type: 'image',
                     controls: controls !== null && controls !== void 0 ? controls : null,
-                    effects: _remotionInternalEffects !== null && _remotionInternalEffects !== void 0 ? _remotionInternalEffects : [],
+                    effects: _remotionInternalEffects !== null && _remotionInternalEffects !== void 0 ? _remotionInternalEffects : EMPTY_EFFECTS,
                     displayName: timelineClipName,
                     documentationLink: resolvedDocumentationLink,
                     duration: actualDurationInFrames,
@@ -153,13 +156,14 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
                     src: isMedia.src,
                     getStack: () => stackRef.current,
                     refForOutline: refForOutline !== null && refForOutline !== void 0 ? refForOutline : null,
+                    isInsideSeries,
                 });
             }
             else {
                 registerSequence({
                     type: isMedia.type,
                     controls: controls !== null && controls !== void 0 ? controls : null,
-                    effects: _remotionInternalEffects !== null && _remotionInternalEffects !== void 0 ? _remotionInternalEffects : [],
+                    effects: _remotionInternalEffects !== null && _remotionInternalEffects !== void 0 ? _remotionInternalEffects : EMPTY_EFFECTS,
                     displayName: timelineClipName,
                     documentationLink: resolvedDocumentationLink,
                     doesVolumeChange: isMedia.data.doesVolumeChange,
@@ -179,6 +183,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
                     startMediaFrom: isMedia.data.startMediaFrom,
                     volume: isMedia.data.volumes,
                     refForOutline: refForOutline !== null && refForOutline !== void 0 ? refForOutline : null,
+                    isInsideSeries,
                 });
             }
             return () => {
@@ -201,8 +206,9 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
             premountDisplay: premountDisplay !== null && premountDisplay !== void 0 ? premountDisplay : null,
             postmountDisplay: postmountDisplay !== null && postmountDisplay !== void 0 ? postmountDisplay : null,
             controls: controls !== null && controls !== void 0 ? controls : null,
-            effects: _remotionInternalEffects !== null && _remotionInternalEffects !== void 0 ? _remotionInternalEffects : [],
+            effects: _remotionInternalEffects !== null && _remotionInternalEffects !== void 0 ? _remotionInternalEffects : EMPTY_EFFECTS,
             refForOutline: refForOutline !== null && refForOutline !== void 0 ? refForOutline : null,
+            isInsideSeries,
         });
         return () => {
             unregisterSequence(id);
@@ -229,6 +235,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
         isMedia,
         resolvedDocumentationLink,
         refForOutline,
+        isInsideSeries,
     ]);
     // Ceil to support floats
     // https://github.com/remotion-dev/remotion/issues/2958
@@ -313,4 +320,8 @@ const SequenceInner = (0, react_1.forwardRef)(SequenceRefForwardingFunction);
  * @description A component that time-shifts its children and wraps them in an absolutely positioned <div>.
  * @see [Documentation](https://www.remotion.dev/docs/sequence)
  */
-exports.Sequence = (0, wrap_in_schema_js_1.wrapInSchema)(SequenceInner, sequence_field_schema_js_1.sequenceSchema);
+exports.Sequence = (0, wrap_in_schema_js_1.wrapInSchema)({
+    Component: SequenceInner,
+    schema: sequence_field_schema_js_1.sequenceSchema,
+    supportsEffects: false,
+});

package/dist/cjs/SequenceManager.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { TSequence } from './CompositionManager.js';
-import type { CanUpdateSequencePropStatus, CodeValues, GetDragOverrides, GetEffectDragOverrides } from './use-schema.js';
+import type { CanUpdateSequencePropStatus, CodeValues, DragOverrideValue, GetDragOverrides, GetEffectDragOverrides } from './use-schema.js';
 export type SequenceManagerContext = {
     registerSequence: (seq: TSequence) => void;
     unregisterSequence: (id: string) => void;
@@ -16,15 +16,16 @@ export type VisualModeDragOverrides = {
     getEffectDragOverrides: GetEffectDragOverrides;
 };
 export type VisualModeSetters = {
-    setDragOverrides: (nodePath: SequencePropsSubscriptionKey, key: string, value: unknown) => void;
+    setDragOverrides: (nodePath: SequencePropsSubscriptionKey, key: string, value: DragOverrideValue) => void;
     clearDragOverrides: (nodePath: SequencePropsSubscriptionKey) => void;
-    setEffectDragOverrides: (nodePath: SequencePropsSubscriptionKey, effectIndex: number, key: string, value: unknown) => void;
+    setEffectDragOverrides: (nodePath: SequencePropsSubscriptionKey, effectIndex: number, key: string, value: DragOverrideValue) => void;
     clearEffectDragOverrides: (nodePath: SequencePropsSubscriptionKey, effectIndex: number) => void;
     setCodeValues: (nodePath: SequencePropsSubscriptionKey, values: (prev: CanUpdateSequencePropsResponse) => CanUpdateSequencePropsResponse) => void;
 };
 export type CanUpdateEffectPropsResponseTrue = {
     canUpdate: true;
     callee: string;
+    importPath: string | null;
     effectIndex: number;
     props: Record<string, CanUpdateSequencePropStatus>;
 };

package/dist/cjs/animated-image/AnimatedImage.js

@@ -17,6 +17,8 @@ const decode_image_js_1 = require("./decode-image.js");
 const request_init_1 = require("./request-init");
 const resolve_image_source_1 = require("./resolve-image-source");
 const animatedImageSchema = {
+    durationInFrames: sequence_field_schema_js_1.durationInFramesField,
+    from: sequence_field_schema_js_1.fromField,
     playbackRate: {
         type: 'number',
         min: 0,
@@ -24,6 +26,8 @@ const animatedImageSchema = {
         step: 0.1,
         default: 1,
         description: 'Playback Rate',
+        hiddenFromList: false,
+        keyframable: false,
     },
     ...sequence_field_schema_js_1.sequenceVisualStyleSchema,
     hidden: sequence_field_schema_js_1.hiddenField,
@@ -171,6 +175,10 @@ const AnimatedImageInner = ({ src, width, height, onError, fit, playbackRate, lo
     };
     return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", durationInFrames: resolvedDuration, name: "<AnimatedImage>", _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/animatedimage", _experimentalControls: controls, _remotionInternalEffects: memoizedEffectDefinitions, ...sequenceProps, _remotionInternalRefForOutline: actualRef, children: jsx_runtime_1.jsx(AnimatedImageContent, { ...animatedImageProps, ref: actualRef, effects: effects, controls: controls }) }));
 };
-exports.AnimatedImage = (0, wrap_in_schema_js_1.wrapInSchema)(AnimatedImageInner, animatedImageSchema);
+exports.AnimatedImage = (0, wrap_in_schema_js_1.wrapInSchema)({
+    Component: AnimatedImageInner,
+    schema: animatedImageSchema,
+    supportsEffects: true,
+});
 exports.AnimatedImage.displayName = 'AnimatedImage';
 (0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(exports.AnimatedImage);

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

@@ -9,7 +9,7 @@ export declare const canvasImageSchema: {
         readonly description: "Offset";
     };
     readonly 'style.scale': {
-        readonly type: "number";
+        readonly type: "scale";
         readonly min: 0.05;
         readonly max: 100;
         readonly step: 0.01;
@@ -17,7 +17,7 @@ export declare const canvasImageSchema: {
         readonly description: "Scale";
     };
     readonly 'style.rotate': {
-        readonly type: "rotation";
+        readonly type: "rotation-css";
         readonly step: 1;
         readonly default: "0deg";
         readonly description: "Rotation";
@@ -29,6 +29,20 @@ export declare const canvasImageSchema: {
         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 fit: {
         readonly type: "enum";

package/dist/cjs/canvas-image/CanvasImage.js

@@ -17,6 +17,8 @@ const use_buffer_state_js_1 = require("../use-buffer-state.js");
 const use_delay_render_js_1 = require("../use-delay-render.js");
 const wrap_in_schema_js_1 = require("../wrap-in-schema.js");
 exports.canvasImageSchema = {
+    durationInFrames: sequence_field_schema_js_1.durationInFramesField,
+    from: sequence_field_schema_js_1.fromField,
     fit: {
         type: 'enum',
         default: 'fill',
@@ -249,6 +251,10 @@ const CanvasImageInner = (0, react_1.forwardRef)(({ src, width, height, fit, eff
  * @description Renders a static image to a `<canvas>` and applies Remotion effects.
  * @see [Documentation](https://www.remotion.dev/docs/canvasimage)
  */
-exports.CanvasImage = (0, wrap_in_schema_js_1.wrapInSchema)(CanvasImageInner, exports.canvasImageSchema);
+exports.CanvasImage = (0, wrap_in_schema_js_1.wrapInSchema)({
+    Component: CanvasImageInner,
+    schema: exports.canvasImageSchema,
+    supportsEffects: true,
+});
 exports.CanvasImage.displayName = 'CanvasImage';
 (0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(exports.CanvasImage);

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

@@ -10,6 +10,7 @@ type OptionalProps = {
     readonly effects: EffectsProp;
     readonly className: string | undefined;
     readonly style: React.CSSProperties | undefined;
+    readonly pixelDensity: number | undefined;
 };
 export type SolidProps = MandatoryProps & Partial<OptionalProps>;
 export declare const Solid: React.ComponentType<MandatoryProps & Partial<OptionalProps> & Pick<SequenceProps, "durationInFrames" | "from" | "hidden" | "name" | "showInTimeline"> & React.RefAttributes<HTMLCanvasElement>>;