remotion 4.0.530 → 4.0.531

package/dist/cjs/AbsoluteFill.d.ts

@@ -233,12 +233,6 @@ export declare const absoluteFillSchema: {
         readonly hiddenFromList: false;
         readonly keyframable: false;
     };
-    readonly loop: {
-        readonly type: "boolean";
-        readonly default: false;
-        readonly description: "Loop";
-        readonly keyframable: false;
-    };
     readonly freeze: {
         readonly type: "number";
         readonly default: null;

package/dist/cjs/HtmlInCanvas.d.ts

@@ -3,24 +3,41 @@ import type { EffectsProp } from './effects/effect-types.js';
 import type { InteractiveBaseProps, InteractiveCropProps } from './Interactive.js';
 import type { AbsoluteFillLayout } from './Sequence.js';
 declare global {
+    interface DrawElementImageOptions {
+        preserveElementGeometry?: boolean;
+    }
+    interface WebGLCopyElementImageConfig {
+        sx?: GLfloat;
+        sy?: GLfloat;
+        swidth?: GLfloat;
+        sheight?: GLfloat;
+        width?: GLsizei;
+        height?: GLsizei;
+    }
+    interface UpdateElementGeometryOptions {
+        preserveHitTestOrder?: boolean;
+        clip?: DOMRectInit;
+        canvasTransform?: DOMMatrixInit;
+    }
     interface ElementImage {
         readonly width: number;
         readonly height: number;
         close(): void;
     }
     interface CanvasRenderingContext2D {
-        drawElementImage(element: Element | ElementImage, dx: number, dy: number): DOMMatrix;
-        drawElementImage(element: Element | ElementImage, dx: number, dy: number, dwidth: number, dheight: number): DOMMatrix;
-        drawElementImage(element: Element | ElementImage, sx: number, sy: number, swidth: number, sheight: number, dx: number, dy: number): DOMMatrix;
-        drawElementImage(element: Element | ElementImage, sx: number, sy: number, swidth: number, sheight: number, dx: number, dy: number, dwidth: number, dheight: number): DOMMatrix;
+        drawElementImage(element: Element | ElementImage, dx: number, dy: number, options?: DrawElementImageOptions): void;
+        drawElementImage(element: Element | ElementImage, dx: number, dy: number, dwidth: number, dheight: number, options?: DrawElementImageOptions): void;
+        drawElementImage(element: Element | ElementImage, sx: number, sy: number, swidth: number, sheight: number, dx: number, dy: number, options?: DrawElementImageOptions): void;
+        drawElementImage(element: Element | ElementImage, sx: number, sy: number, swidth: number, sheight: number, dx: number, dy: number, dwidth: number, dheight: number, options?: DrawElementImageOptions): void;
     }
     interface OffscreenCanvasRenderingContext2D {
-        drawElementImage(element: Element | ElementImage, dx: number, dy: number): DOMMatrix;
-        drawElementImage(element: Element | ElementImage, dx: number, dy: number, dwidth: number, dheight: number): DOMMatrix;
-        drawElementImage(element: Element | ElementImage, sx: number, sy: number, swidth: number, sheight: number, dx: number, dy: number): DOMMatrix;
-        drawElementImage(element: Element | ElementImage, sx: number, sy: number, swidth: number, sheight: number, dx: number, dy: number, dwidth: number, dheight: number): DOMMatrix;
+        drawElementImage(element: Element | ElementImage, dx: number, dy: number, options?: DrawElementImageOptions): void;
+        drawElementImage(element: Element | ElementImage, dx: number, dy: number, dwidth: number, dheight: number, options?: DrawElementImageOptions): void;
+        drawElementImage(element: Element | ElementImage, sx: number, sy: number, swidth: number, sheight: number, dx: number, dy: number, options?: DrawElementImageOptions): void;
+        drawElementImage(element: Element | ElementImage, sx: number, sy: number, swidth: number, sheight: number, dx: number, dy: number, dwidth: number, dheight: number, options?: DrawElementImageOptions): void;
     }
     interface WebGLRenderingContextBase {
+        texElementSubImage2D(target: GLenum, level: GLint, xoffset: GLint, yoffset: GLint, element: Element | ElementImage, config?: WebGLCopyElementImageConfig): void;
         texElementImage2D(target: GLenum, level: GLint, internalformat: GLint, format: GLenum, type: GLenum, element: Element | ElementImage): void;
         texElementImage2D(target: GLenum, level: GLint, internalformat: GLint, width: GLsizei, height: GLsizei, format: GLenum, type: GLenum, element: Element | ElementImage): void;
         texElementImage2D(target: GLenum, level: GLint, internalformat: GLint, sx: GLfloat, sy: GLfloat, swidth: GLfloat, sheight: GLfloat, format: GLenum, type: GLenum, element: Element | ElementImage): void;
@@ -30,11 +47,18 @@ declare global {
         paint: Event;
     }
     interface HTMLCanvasElement {
+        content: string;
         layoutSubtree?: boolean;
         onpaint: ((this: HTMLCanvasElement, ev: Event) => unknown) | null;
         requestPaint?(): void;
         captureElementImage(element: Element): ElementImage;
-        getElementTransform(element: Element | ElementImage, drawTransform: DOMMatrix): DOMMatrix;
+        updateElementGeometry(element: Element | ElementImage, options?: UpdateElementGeometryOptions): void;
+        clearElementGeometry(element: Element | ElementImage): void;
+        getElementTransform(element: Element): DOMMatrix;
+    }
+    interface OffscreenCanvas {
+        updateElementGeometry(element: Element | ElementImage, options?: UpdateElementGeometryOptions): void;
+        clearElementGeometry(element: Element | ElementImage): void;
     }
 }
 export type HtmlInCanvasOnPaintParams = {
@@ -264,12 +288,6 @@ export declare const htmlInCanvasSchema: {
         readonly hiddenFromList: false;
         readonly keyframable: false;
     };
-    readonly loop: {
-        readonly type: "boolean";
-        readonly default: false;
-        readonly description: "Loop";
-        readonly keyframable: false;
-    };
     readonly freeze: {
         readonly type: "number";
         readonly default: null;

package/dist/cjs/HtmlInCanvas.js

@@ -125,14 +125,13 @@ const resizePaintTarget = ({ target, width, height, }) => {
         target.height = height;
     }
 };
-const defaultOnPaint = ({ canvas, element, elementImage, }) => {
+const defaultOnPaint = ({ canvas, elementImage, }) => {
     const ctx = canvas.getContext('2d');
     if (!ctx) {
         throw new Error('Failed to acquire 2D context for <HtmlInCanvas> canvas');
     }
     ctx.reset();
-    const transform = ctx.drawElementImage(elementImage, 0, 0);
-    element.style.transform = transform.toString();
+    ctx.drawElementImage(elementImage, 0, 0);
 };
 /* eslint-enable react/require-default-props */
 const HtmlInCanvasAncestorContext = (0, react_1.createContext)(false);
@@ -328,11 +327,14 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
     // Default paint handlers draw synchronously on the layout canvas itself.
     // Custom handlers retain the transferred OffscreenCanvas API.
     (0, react_1.useLayoutEffect)(() => {
+        var _a;
         const placeholder = canvas2dRef.current;
         if (!placeholder) {
             throw new Error('Canvas not found');
         }
+        placeholder.setAttribute('content', 'drawable');
         placeholder.layoutSubtree = true;
+        (_a = divRef.current) === null || _a === void 0 ? void 0 : _a.setAttribute('drawable', '');
         const paintTarget = usesDirectLayoutCanvas
             ? placeholder
             : getTransferredOffscreenCanvas(placeholder);

package/dist/cjs/Img.d.ts

@@ -203,12 +203,6 @@ export declare const imgSchema: {
         readonly step: 1;
         readonly hiddenFromList: true;
     };
-    readonly loop: {
-        readonly type: "boolean";
-        readonly default: false;
-        readonly description: "Loop";
-        readonly keyframable: false;
-    };
     readonly freeze: {
         readonly type: "number";
         readonly default: null;

package/dist/cjs/Interactive.d.ts

@@ -67,12 +67,6 @@ export declare const Interactive: {
             readonly hiddenFromList: false;
             readonly keyframable: false;
         };
-        readonly loop: {
-            readonly type: "boolean";
-            readonly default: false;
-            readonly description: "Loop";
-            readonly keyframable: false;
-        };
         readonly freeze: {
             readonly type: "number";
             readonly default: null;
@@ -410,12 +404,6 @@ export declare const Interactive: {
             readonly hiddenFromList: false;
             readonly keyframable: false;
         };
-        readonly loop: {
-            readonly type: "boolean";
-            readonly default: false;
-            readonly description: "Loop";
-            readonly keyframable: false;
-        };
         readonly freeze: {
             readonly type: "number";
             readonly default: null;

package/dist/cjs/Interactive.js

@@ -36,6 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Interactive = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
+const CompositionManagerContext_js_1 = require("./CompositionManagerContext.js");
 const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
 const freeze_js_1 = require("./freeze.js");
 const interactivity_schema_js_1 = require("./interactivity-schema.js");
@@ -123,6 +124,13 @@ const withSchema = (untypedOptions) => {
     }
     const { Component, componentName, schema, wrapInSequence: _, ...rest } = options;
     const ComponentWrappedInSequence = (0, react_1.forwardRef)((props, ref) => {
+        const { canvasContent, compositions } = (0, react_1.useContext)(CompositionManagerContext_js_1.CompositionManager);
+        // The render callback runs after the exported wrapper has been initialized.
+        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+        const componentIdentity = (0, enable_sequence_stack_traces_js_1.resolveComponentIdentity)(Wrapped);
+        const isCurrentComposition = compositions.some((composition) => (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' &&
+            composition.id === canvasContent.compositionId &&
+            composition.componentFromProps === componentIdentity);
         const { durationInFrames, from, trimBefore, playbackRate, loop, freeze, hidden, name, showInTimeline, controls, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, ...componentProps } = props;
         const { cropLeft, cropRight, cropTop, cropBottom, style, ...componentPropsWithoutCropping } = componentProps;
         const { effectivePremountFor, effectivePostmountFor, freezeFrame, isPremountingOrPostmounting, premountingActive, postmountingActive, premountingStyle, } = (0, use_premounting_js_1.usePremounting)({
@@ -147,7 +155,7 @@ const withSchema = (untypedOptions) => {
             style: premountingStyle,
             componentName,
         });
-        return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(Sequence_js_1.SequenceWithoutSchema, { layout: "none", durationInFrames: durationInFrames, from: from, trimBefore: trimBefore, playbackRate: playbackRate, loop: loop, freeze: freeze, hidden: hidden, name: name !== null && name !== void 0 ? name : componentName, showInTimeline: showInTimeline, controls: controls, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: react_1.default.createElement(Component, {
+        return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(Sequence_js_1.SequenceWithoutSchema, { _remotionInternalSingleChildComponent: isCurrentComposition ? null : componentIdentity, layout: "none", durationInFrames: durationInFrames, from: from, trimBefore: trimBefore, playbackRate: playbackRate, loop: loop, freeze: freeze, hidden: hidden, name: name !== null && name !== void 0 ? name : componentName, showInTimeline: isCurrentComposition ? false : showInTimeline, controls: controls, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: react_1.default.createElement(Component, {
                     ...componentPropsWithoutCropping,
                     style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined,
                     ref,

package/dist/cjs/animated-image/AnimatedImage.d.ts

@@ -199,12 +199,6 @@ export declare const animatedImageSchema: {
         readonly hiddenFromList: false;
         readonly keyframable: false;
     };
-    readonly loop: {
-        readonly type: "boolean";
-        readonly default: false;
-        readonly description: "Loop";
-        readonly keyframable: false;
-    };
     readonly freeze: {
         readonly type: "number";
         readonly default: null;
@@ -221,6 +215,12 @@ export declare const animatedImageSchema: {
         readonly description: "Source";
         readonly keyframable: false;
     };
+    readonly loop: {
+        readonly type: "boolean";
+        readonly default: false;
+        readonly description: "Loop";
+        readonly keyframable: false;
+    };
 };
 export declare const AnimatedImage: React.ComponentType<import("../Interactive.js").InteractiveBaseProps & import("../Interactive.js").InteractiveCropProps & import("../Interactive.js").InteractivePremountProps & {
     src: string;

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

@@ -32,6 +32,7 @@ exports.animatedImageSchema = {
         keyframable: false,
     },
     ...interactivity_schema_js_1.baseSchema,
+    loop: interactivity_schema_js_1.loopField,
     ...interactivity_schema_js_1.cropSchema,
     ...interactivity_schema_js_1.premountSchema,
     ...interactivity_schema_js_1.transformSchema,

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

@@ -189,12 +189,6 @@ export declare const canvasImageSchema: {
         readonly step: 1;
         readonly hiddenFromList: true;
     };
-    readonly loop: {
-        readonly type: "boolean";
-        readonly default: false;
-        readonly description: "Loop";
-        readonly keyframable: false;
-    };
     readonly freeze: {
         readonly type: "number";
         readonly default: null;

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

@@ -211,12 +211,6 @@ export declare const solidSchema: {
         readonly hiddenFromList: false;
         readonly keyframable: false;
     };
-    readonly loop: {
-        readonly type: "boolean";
-        readonly default: false;
-        readonly description: "Loop";
-        readonly keyframable: false;
-    };
     readonly freeze: {
         readonly type: "number";
         readonly default: null;

package/dist/cjs/interactivity-schema.d.ts

@@ -805,12 +805,6 @@ export declare const baseSchema: {
         readonly hiddenFromList: false;
         readonly keyframable: false;
     };
-    readonly loop: {
-        readonly type: "boolean";
-        readonly default: false;
-        readonly description: "Loop";
-        readonly keyframable: false;
-    };
     readonly freeze: {
         readonly type: "number";
         readonly default: null;
@@ -842,12 +836,6 @@ export declare const baseSchemaWithoutPlaybackRate: {
         readonly step: 1;
         readonly hiddenFromList: true;
     };
-    readonly loop: {
-        readonly type: "boolean";
-        readonly default: false;
-        readonly description: "Loop";
-        readonly keyframable: false;
-    };
     readonly freeze: {
         readonly type: "number";
         readonly default: null;
@@ -888,12 +876,6 @@ export declare const sequenceSchema: {
         readonly hiddenFromList: false;
         readonly keyframable: false;
     };
-    readonly loop: {
-        readonly type: "boolean";
-        readonly default: false;
-        readonly description: "Loop";
-        readonly keyframable: false;
-    };
     readonly freeze: {
         readonly type: "number";
         readonly default: null;
@@ -1106,12 +1088,6 @@ export declare const baseSchemaWithoutFrom: {
         readonly hiddenFromList: false;
         readonly keyframable: false;
     };
-    readonly loop: {
-        readonly type: "boolean";
-        readonly default: false;
-        readonly description: "Loop";
-        readonly keyframable: false;
-    };
     readonly freeze: {
         readonly type: "number";
         readonly default: null;
@@ -1146,12 +1122,6 @@ export declare const sequenceSchemaWithoutFrom: {
         readonly hiddenFromList: false;
         readonly keyframable: false;
     };
-    readonly loop: {
-        readonly type: "boolean";
-        readonly default: false;
-        readonly description: "Loop";
-        readonly keyframable: false;
-    };
     readonly freeze: {
         readonly type: "number";
         readonly default: null;

package/dist/cjs/interactivity-schema.js

@@ -380,7 +380,6 @@ exports.baseSchema = {
     from: exports.fromField,
     trimBefore: exports.trimBeforeField,
     playbackRate: playbackRateField,
-    loop: exports.loopField,
     freeze: exports.freezeField,
     hidden: exports.hiddenField,
     name: exports.sequenceNameField,
@@ -391,7 +390,6 @@ exports.baseSchemaWithoutPlaybackRate = {
     durationInFrames: exports.durationInFramesField,
     from: exports.fromField,
     trimBefore: exports.trimBeforeField,
-    loop: exports.loopField,
     freeze: exports.freezeField,
     hidden: exports.hiddenField,
     name: exports.sequenceNameField,
@@ -413,7 +411,6 @@ exports.baseSchemaWithoutFrom = {
     durationInFrames: exports.durationInFramesField,
     trimBefore: exports.trimBeforeField,
     playbackRate: playbackRateField,
-    loop: exports.loopField,
     freeze: exports.freezeField,
     hidden: exports.hiddenField,
     name: exports.sequenceNameField,

package/dist/cjs/internals.d.ts

@@ -154,12 +154,6 @@ export declare const Internals: {
             readonly hiddenFromList: false;
             readonly keyframable: false;
         };
-        readonly loop: {
-            readonly type: "boolean";
-            readonly default: false;
-            readonly description: "Loop";
-            readonly keyframable: false;
-        };
         readonly freeze: {
             readonly type: "number";
             readonly default: null;
@@ -200,12 +194,6 @@ export declare const Internals: {
             readonly hiddenFromList: false;
             readonly keyframable: false;
         };
-        readonly loop: {
-            readonly type: "boolean";
-            readonly default: false;
-            readonly description: "Loop";
-            readonly keyframable: false;
-        };
         readonly freeze: {
             readonly type: "number";
             readonly default: null;
@@ -1060,6 +1048,8 @@ export declare const Internals: {
     readonly useTimelineSetFrameWithoutSeek: () => (u: import("react").SetStateAction<Record<string, number>>) => void;
     readonly isIosSafari: () => boolean;
     readonly WATCH_REMOTION_STATIC_FILES: "remotion_staticFilesChanged";
+    readonly REACT_REFRESH_STARTED_EVENT: "remotion-react-refresh-started";
+    readonly REACT_REFRESH_FINISHED_EVENT: "remotion-react-refresh-finished";
     readonly addSequenceStackTraces: (component: unknown) => void;
     readonly useMediaStartsAt: () => number;
     readonly BufferingProvider: import("react").FC<{

package/dist/cjs/internals.js

@@ -78,6 +78,7 @@ const portal_node_js_1 = require("./portal-node.js");
 const prefetch_state_js_1 = require("./prefetch-state.js");
 const prefetch_js_1 = require("./prefetch.js");
 const PremountContext_js_1 = require("./PremountContext.js");
+const react_refresh_event_js_1 = require("./react-refresh-event.js");
 const register_root_js_1 = require("./register-root.js");
 const remotion_environment_context_js_1 = require("./remotion-environment-context.js");
 const RemotionRoot_js_1 = require("./RemotionRoot.js");
@@ -247,6 +248,8 @@ exports.Internals = {
     useTimelineSetFrameWithoutSeek: timeline_position_state_js_1.useTimelineSetFrameWithoutSeek,
     isIosSafari: video_fragment_js_1.isIosSafari,
     WATCH_REMOTION_STATIC_FILES: watch_static_file_js_1.WATCH_REMOTION_STATIC_FILES,
+    REACT_REFRESH_STARTED_EVENT: react_refresh_event_js_1.REACT_REFRESH_STARTED_EVENT,
+    REACT_REFRESH_FINISHED_EVENT: react_refresh_event_js_1.REACT_REFRESH_FINISHED_EVENT,
     addSequenceStackTraces: enable_sequence_stack_traces_js_1.addSequenceStackTraces,
     useMediaStartsAt: use_audio_frame_js_1.useMediaStartsAt,
     BufferingProvider: buffering_js_1.BufferingProvider,

package/dist/cjs/no-react.d.ts

@@ -92,12 +92,6 @@ export declare const NoReactInternals: {
             readonly hiddenFromList: false;
             readonly keyframable: false;
         };
-        readonly loop: {
-            readonly type: "boolean";
-            readonly default: false;
-            readonly description: "Loop";
-            readonly keyframable: false;
-        };
         readonly freeze: {
             readonly type: "number";
             readonly default: null;

package/dist/cjs/nonce.d.ts

@@ -0,0 +1,11 @@
+export type TNonceContext = {
+    getNonce: () => number;
+};
+type NonceHistoryItem = [number, number];
+export type NonceHistory = NonceHistoryItem[];
+export type NonceHistoryContext = {
+    get: () => NonceHistory;
+};
+export declare const NonceContext: import("react").Context<TNonceContext>;
+export declare const useNonce: () => NonceHistoryContext;
+export {};

package/dist/cjs/nonce.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useNonce = exports.NonceContext = void 0;
+const react_1 = require("react");
+exports.NonceContext = (0, react_1.createContext)({
+    getNonce: () => 0,
+});
+let fastRefreshNonce = 0;
+try {
+    if (typeof __webpack_module__ !== 'undefined') {
+        if (__webpack_module__.hot) {
+            __webpack_module__.hot.addStatusHandler((status) => {
+                if (status === 'idle') {
+                    fastRefreshNonce++;
+                }
+            });
+        }
+    }
+}
+catch (_a) {
+    // __webpack_module__ may throw ReferenceError in some environments
+}
+const useNonce = () => {
+    const context = (0, react_1.useContext)(exports.NonceContext);
+    const nonce = context.getNonce();
+    const nonceRef = (0, react_1.useRef)(nonce);
+    nonceRef.current = nonce;
+    const history = (0, react_1.useRef)([[fastRefreshNonce, nonce]]);
+    const get = (0, react_1.useCallback)(() => {
+        if (fastRefreshNonce !== history.current[history.current.length - 1][0]) {
+            history.current = [
+                ...history.current,
+                [fastRefreshNonce, nonceRef.current],
+            ];
+        }
+        return history.current;
+    }, [history]);
+    return (0, react_1.useMemo)(() => {
+        return { get };
+    }, [get]);
+};
+exports.useNonce = useNonce;

package/dist/cjs/react-refresh-event.d.ts

@@ -0,0 +1,2 @@
+export declare const REACT_REFRESH_STARTED_EVENT = "remotion-react-refresh-started";
+export declare const REACT_REFRESH_FINISHED_EVENT = "remotion-react-refresh-finished";

package/dist/cjs/react-refresh-event.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.REACT_REFRESH_FINISHED_EVENT = exports.REACT_REFRESH_STARTED_EVENT = void 0;
+// Dispatched on `window` by the Fast Refresh integrations of the bundlers
+// around `performReactRefresh()`, so editors can synchronize state with the
+// refreshed tree.
+exports.REACT_REFRESH_STARTED_EVENT = 'remotion-react-refresh-started';
+exports.REACT_REFRESH_FINISHED_EVENT = 'remotion-react-refresh-finished';

package/dist/cjs/series/index.js

@@ -52,7 +52,6 @@ const seriesSequenceSchema = {
     freeze: Interactive_js_1.Interactive.baseSchema.freeze,
     trimBefore: Interactive_js_1.Interactive.sequenceSchema.trimBefore,
     playbackRate: Interactive_js_1.Interactive.sequenceSchema.playbackRate,
-    loop: { type: 'hidden' },
     layout: Interactive_js_1.Interactive.sequenceSchema.layout,
 };
 const SeriesSequenceInner = (0, react_1.forwardRef)(({ offset = 0, className = '', _remotionInternalRender = null, ...props }, ref) => {

package/dist/cjs/version.d.ts

@@ -3,4 +3,4 @@
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-export declare const VERSION = "4.0.530";
+export declare const VERSION = "4.0.531";

package/dist/cjs/version.js

@@ -7,4 +7,4 @@ exports.VERSION = void 0;
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-exports.VERSION = '4.0.530';
+exports.VERSION = '4.0.531';

package/dist/esm/index.mjs

@@ -1561,7 +1561,7 @@ var Composition = (props) => {
 };
 
 // src/version.ts
-var VERSION = "4.0.530";
+var VERSION = "4.0.531";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -2431,7 +2431,6 @@ var baseSchema = {
   from: fromField,
   trimBefore: trimBeforeField,
   playbackRate: playbackRateField,
-  loop: loopField,
   freeze: freezeField,
   hidden: hiddenField,
   name: sequenceNameField,
@@ -2441,7 +2440,6 @@ var baseSchemaWithoutPlaybackRate = {
   durationInFrames: durationInFramesField,
   from: fromField,
   trimBefore: trimBeforeField,
-  loop: loopField,
   freeze: freezeField,
   hidden: hiddenField,
   name: sequenceNameField,
@@ -2463,7 +2461,6 @@ var baseSchemaWithoutFrom = {
   durationInFrames: durationInFramesField,
   trimBefore: trimBeforeField,
   playbackRate: playbackRateField,
-  loop: loopField,
   freeze: freezeField,
   hidden: hiddenField,
   name: sequenceNameField,
@@ -7032,6 +7029,7 @@ var animatedImageSchema = {
     keyframable: false
   },
   ...baseSchema,
+  loop: loopField,
   ...cropSchema,
   ...premountSchema,
   ...transformSchema,
@@ -11291,7 +11289,6 @@ var resizePaintTarget = ({
 };
 var defaultOnPaint = ({
   canvas,
-  element,
   elementImage
 }) => {
   const ctx = canvas.getContext("2d");
@@ -11299,8 +11296,7 @@ var defaultOnPaint = ({
     throw new Error("Failed to acquire 2D context for <HtmlInCanvas> canvas");
   }
   ctx.reset();
-  const transform = ctx.drawElementImage(elementImage, 0, 0);
-  element.style.transform = transform.toString();
+  ctx.drawElementImage(elementImage, 0, 0);
 };
 var HtmlInCanvasAncestorContext = createContext28(false);
 var HtmlInCanvasContent = forwardRef9(({
@@ -11487,7 +11483,9 @@ var HtmlInCanvasContent = forwardRef9(({
     if (!placeholder) {
       throw new Error("Canvas not found");
     }
+    placeholder.setAttribute("content", "drawable");
     placeholder.layoutSubtree = true;
+    divRef.current?.setAttribute("drawable", "");
     const paintTarget = usesDirectLayoutCanvas ? placeholder : getTransferredOffscreenCanvas(placeholder);
     paintTargetRef.current = paintTarget;
     resizePaintTarget({
@@ -12688,7 +12686,7 @@ var Img = withInteractivitySchema({
 });
 addSequenceStackTraces(Img);
 // src/Interactive.tsx
-import React35, { forwardRef as forwardRef12, useCallback as useCallback22 } from "react";
+import React35, { forwardRef as forwardRef12, useCallback as useCallback22, useContext as useContext40 } from "react";
 import { jsx as jsx31 } from "react/jsx-runtime";
 var sourcePathToIdentityPrefix = (packageName) => {
   if (packageName === "remotion") {
@@ -12775,6 +12773,9 @@ var withSchema = (untypedOptions) => {
     ...rest
   } = options;
   const ComponentWrappedInSequence = forwardRef12((props2, ref) => {
+    const { canvasContent, compositions } = useContext40(CompositionManager);
+    const componentIdentity = resolveComponentIdentity(Wrapped);
+    const isCurrentComposition = compositions.some((composition) => canvasContent?.type === "composition" && composition.id === canvasContent.compositionId && composition.componentFromProps === componentIdentity);
     const {
       durationInFrames,
       from,
@@ -12834,6 +12835,7 @@ var withSchema = (untypedOptions) => {
       frame: freezeFrame,
       active: isPremountingOrPostmounting,
       children: /* @__PURE__ */ jsx31(SequenceWithoutSchema, {
+        _remotionInternalSingleChildComponent: isCurrentComposition ? null : componentIdentity,
         layout: "none",
         durationInFrames,
         from,
@@ -12843,7 +12845,7 @@ var withSchema = (untypedOptions) => {
         freeze,
         hidden,
         name: name ?? componentName,
-        showInTimeline,
+        showInTimeline: isCurrentComposition ? false : showInTimeline,
         controls,
         _remotionInternalPremountDisplay: effectivePremountFor || null,
         _remotionInternalPostmountDisplay: effectivePostmountFor || null,
@@ -13439,6 +13441,10 @@ var getMediabunnyInputResourceKey = ({
 var MEDIABUNNY_DURATION_VALUE_KEY = "mediabunny-duration";
 var globalMediaResourceManager = makeMediaResourceManager();
 
+// src/react-refresh-event.ts
+var REACT_REFRESH_STARTED_EVENT = "remotion-react-refresh-started";
+var REACT_REFRESH_FINISHED_EVENT = "remotion-react-refresh-finished";
+
 // src/register-root.ts
 var Root = null;
 var listeners = [];
@@ -13783,7 +13789,7 @@ var setupEnvVariables = () => {
 };
 
 // src/use-pixel-density.ts
-import React41, { useContext as useContext40 } from "react";
+import React41, { useContext as useContext41 } from "react";
 var PixelDensityContext = React41.createContext(null);
 var getBrowserPixelDensity = () => {
   if (typeof window === "undefined") {
@@ -13792,8 +13798,8 @@ var getBrowserPixelDensity = () => {
   return window.devicePixelRatio || 1;
 };
 var usePixelDensity = (options) => {
-  const pixelDensity = useContext40(PixelDensityContext);
-  const canUseRemotionHooks = useContext40(CanUseRemotionHooks);
+  const pixelDensity = useContext41(PixelDensityContext);
+  const canUseRemotionHooks = useContext41(CanUseRemotionHooks);
   if (pixelDensity !== null) {
     return pixelDensity;
   }
@@ -13815,7 +13821,7 @@ import { useCallback as useCallback26 } from "react";
 // src/video/OffthreadVideoForRendering.tsx
 import {
   useCallback as useCallback24,
-  useContext as useContext41,
+  useContext as useContext42,
   useEffect as useEffect18,
   useLayoutEffect as useLayoutEffect16,
   useMemo as useMemo37,
@@ -13858,10 +13864,10 @@ var OffthreadVideoForRendering = ({
   const frame = useCurrentFrame();
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior);
   const videoConfig = useUnsafeVideoConfig();
-  const sequenceContext = useContext41(SequenceContext);
+  const sequenceContext = useContext42(SequenceContext);
   const sequencePlaybackRate = sequenceContext?.playbackRate ?? 1;
-  const audioStartFrame = useContext41(Html5MediaTrimContext);
-  const { registerRenderAsset, unregisterRenderAsset } = useContext41(RenderAssetManager);
+  const audioStartFrame = useContext42(Html5MediaTrimContext);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext42(RenderAssetManager);
   if (!src) {
     throw new TypeError("No `src` was passed to <OffthreadVideo>.");
   }
@@ -14043,7 +14049,7 @@ var OffthreadVideoForRendering = ({
 import React43, {
   forwardRef as forwardRef13,
   useCallback as useCallback25,
-  useContext as useContext42,
+  useContext as useContext43,
   useEffect as useEffect20,
   useImperativeHandle as useImperativeHandle9,
   useMemo as useMemo38,
@@ -14099,7 +14105,7 @@ class MediaPlaybackError extends Error {
 // src/video/VideoForPreview.tsx
 import { jsx as jsx35 } from "react/jsx-runtime";
 var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
-  const context = useContext42(SharedAudioContext);
+  const context = useContext43(SharedAudioContext);
   if (!context) {
     throw new Error("SharedAudioContext not found");
   }
@@ -14156,7 +14162,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   }
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const { fps, durationInFrames } = useVideoConfig();
-  const parentSequence = useContext42(SequenceContext);
+  const parentSequence = useContext43(SequenceContext);
   const { isStudio } = useRemotionEnvironment();
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
@@ -14765,6 +14771,8 @@ var Internals = {
   useTimelineSetFrameWithoutSeek,
   isIosSafari,
   WATCH_REMOTION_STATIC_FILES,
+  REACT_REFRESH_STARTED_EVENT,
+  REACT_REFRESH_FINISHED_EVENT,
   addSequenceStackTraces,
   useMediaStartsAt,
   BufferingProvider,
@@ -14871,7 +14879,6 @@ var seriesSequenceSchema = {
   freeze: Interactive.baseSchema.freeze,
   trimBefore: Interactive.sequenceSchema.trimBefore,
   playbackRate: Interactive.sequenceSchema.playbackRate,
-  loop: { type: "hidden" },
   layout: Interactive.sequenceSchema.layout
 };
 var SeriesSequenceInner = forwardRef14(({ offset = 0, className = "", _remotionInternalRender = null, ...props2 }, ref) => {
@@ -15115,12 +15122,12 @@ var Still = (props2) => {
 };
 addSequenceStackTraces(Still);
 // src/video/html5-video.tsx
-import { forwardRef as forwardRef16, useCallback as useCallback27, useContext as useContext44 } from "react";
+import { forwardRef as forwardRef16, useCallback as useCallback27, useContext as useContext45 } from "react";
 
 // src/video/VideoForRendering.tsx
 import {
   forwardRef as forwardRef15,
-  useContext as useContext43,
+  useContext as useContext44,
   useEffect as useEffect21,
   useImperativeHandle as useImperativeHandle10,
   useLayoutEffect as useLayoutEffect17,
@@ -15276,14 +15283,14 @@ var VideoForRenderingForwardFunction = ({
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const videoConfig = useUnsafeVideoConfig();
   const videoRef = useRef28(null);
-  const sequenceContext = useContext43(SequenceContext);
+  const sequenceContext = useContext44(SequenceContext);
   const sequencePlaybackRate = sequenceContext?.playbackRate ?? 1;
-  const audioStartFrame = useContext43(Html5MediaTrimContext);
+  const audioStartFrame = useContext44(Html5MediaTrimContext);
   const environment = useRemotionEnvironment();
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext43(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext44(RenderAssetManager);
   const id = useMemo41(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     props2.src,
     sequenceContext?.cumulatedFrom,
@@ -15501,7 +15508,7 @@ var VideoForwardingFunction = (props2, ref) => {
   if (environment.isClientSideRendering) {
     throw new Error("<Html5Video> is not supported in @remotion/web-renderer. Use <Video> from @remotion/media instead. See https://remotion.dev/docs/client-side-rendering/limitations");
   }
-  const { durations, setDurations } = useContext44(DurationsContext);
+  const { durations, setDurations } = useContext45(DurationsContext);
   if (typeof ref === "string") {
     throw new Error("string refs are not supported");
   }

package/dist/esm/no-react.mjs

@@ -1764,12 +1764,6 @@ var trimBeforeField = {
   step: 1,
   hiddenFromList: true
 };
-var loopField = {
-  type: "boolean",
-  default: false,
-  description: "Loop",
-  keyframable: false
-};
 var freezeField = {
   type: "number",
   default: null,
@@ -1790,7 +1784,6 @@ var baseSchema = {
   from: fromField,
   trimBefore: trimBeforeField,
   playbackRate: playbackRateField,
-  loop: loopField,
   freeze: freezeField,
   hidden: hiddenField,
   name: sequenceNameField,
@@ -1812,7 +1805,6 @@ var baseSchemaWithoutFrom = {
   durationInFrames: durationInFramesField,
   trimBefore: trimBeforeField,
   playbackRate: playbackRateField,
-  loop: loopField,
   freeze: freezeField,
   hidden: hiddenField,
   name: sequenceNameField,

package/dist/esm/version.mjs

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "4.0.530";
+var VERSION = "4.0.531";
 export {
   VERSION
 };

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/core"
 	},
 	"name": "remotion",
-	"version": "4.0.530",
+	"version": "4.0.531",
 	"description": "Make videos programmatically",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
@@ -35,7 +35,7 @@
 		"react-dom": "19.2.3",
 		"webpack": "5.105.0",
 		"zod": "4.5.4",
-		"@remotion/eslint-config-internal": "4.0.530",
+		"@remotion/eslint-config-internal": "4.0.531",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},