remotion 4.0.477 → 4.0.479

package/dist/cjs/CompositionManager.d.ts

@@ -4,9 +4,9 @@ import type { AnyZodObject } from './any-zod-type.js';
 import type { CalculateMetadataFunction } from './Composition.js';
 import type { DownloadBehavior } from './download-behavior.js';
 import type { EffectDefinition } from './effects/effect-types.js';
+import type { InteractivitySchema } from './interactivity-schema.js';
 import type { NonceHistory } from './nonce.js';
 import type { InferProps, PropsIfHasProps } from './props-if-has-props.js';
-import type { SequenceSchema } from './sequence-field-schema.js';
 export type TComposition<Schema extends AnyZodObject, Props extends Record<string, unknown>> = {
     width: number | undefined;
     height: number | undefined;
@@ -34,6 +34,7 @@ type EnhancedTSequenceData = {
     doesVolumeChange: boolean;
     startMediaFrom: number;
     playbackRate: number;
+    frozenMediaFrame: number | null;
 } | {
     type: 'video';
     src: string;
@@ -41,6 +42,7 @@ type EnhancedTSequenceData = {
     doesVolumeChange: boolean;
     startMediaFrom: number;
     playbackRate: number;
+    frozenMediaFrame: number | null;
 } | {
     type: 'image';
     src: string;
@@ -52,7 +54,7 @@ export type LoopDisplay = {
 };
 export type JsxComponentIdentity = string;
 export type SequenceControls = {
-    schema: SequenceSchema;
+    schema: InteractivitySchema;
     currentRuntimeValueDotNotation: Record<string, unknown>;
     overrideId: string;
     supportsEffects: boolean;
@@ -76,6 +78,7 @@ export type TSequence = {
     refForOutline: React.RefObject<Element | null> | null;
     effects: readonly EffectDefinition<unknown>[];
     isInsideSeries: boolean;
+    frozenFrame: number | null;
 } & EnhancedTSequenceData;
 export type AudioOrVideoAsset = {
     type: 'audio' | 'video';

package/dist/cjs/HtmlInCanvas.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { EffectsProp } from './effects/effect-types.js';
-import type { AbsoluteFillLayout, LayoutAndStyle, SequenceProps } from './Sequence.js';
+import type { InteractiveBaseProps } from './Interactive.js';
+import type { AbsoluteFillLayout } from './Sequence.js';
 declare global {
     interface ElementImage {
         readonly width: number;
@@ -53,7 +54,7 @@ export type HtmlInCanvasOnPaint = (params: HtmlInCanvasOnPaintParams) => 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'> & {
+export type HtmlInCanvasProps = Omit<InteractiveBaseProps, 'children'> & Omit<AbsoluteFillLayout, 'layout' | 'styleWhilePostmounted' | 'postmountFor' | 'premountFor' | 'styleWhilePremounted'> & {
     readonly durationInFrames?: number;
     readonly width: number;
     readonly height: number;
@@ -63,7 +64,7 @@ export type HtmlInCanvasProps = Omit<SequenceProps, 'children' | 'durationInFram
     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"> & {
+export declare const HtmlInCanvas: React.ForwardRefExoticComponent<Omit<InteractiveBaseProps, "children"> & Omit<AbsoluteFillLayout, "layout" | "postmountFor" | "premountFor" | "styleWhilePostmounted" | "styleWhilePremounted"> & {
     readonly durationInFrames?: number | undefined;
     readonly width: number;
     readonly height: number;

package/dist/cjs/HtmlInCanvas.js

@@ -8,11 +8,11 @@ const run_effect_chain_js_1 = require("./effects/run-effect-chain.js");
 const use_effect_chain_state_js_1 = require("./effects/use-effect-chain-state.js");
 const use_memoized_effects_js_1 = require("./effects/use-memoized-effects.js");
 const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
-const sequence_field_schema_js_1 = require("./sequence-field-schema.js");
+const interactivity_schema_js_1 = require("./interactivity-schema.js");
 const Sequence_js_1 = require("./Sequence.js");
 const use_delay_render_js_1 = require("./use-delay-render.js");
 const use_video_config_js_1 = require("./use-video-config.js");
-const wrap_in_schema_js_1 = require("./wrap-in-schema.js");
+const with_interactivity_schema_js_1 = require("./with-interactivity-schema.js");
 // Memoize the support check across the session — neither the platform
 // capability nor the chrome://flags toggle can change between calls.
 // SSR results are not cached so the check runs again once `document` exists.
@@ -275,7 +275,7 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
     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, pixelDensity, _experimentalControls: controls, style, durationInFrames, name, ...sequenceProps }, ref) => {
+const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, effects = [], children, onPaint, onInit, pixelDensity, 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);
@@ -290,17 +290,14 @@ const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, effects = []
                 node;
         }
     }, [ref]);
-    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { durationInFrames: resolvedDuration, name: name !== null && name !== void 0 ? name : '<HtmlInCanvas>', _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/remotion/html-in-canvas", _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 }) }));
+    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { durationInFrames: resolvedDuration, name: name !== null && name !== void 0 ? name : '<HtmlInCanvas>', _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/remotion/html-in-canvas", controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, outlineRef: 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,
-    freeze: sequence_field_schema_js_1.freezeField,
-    ...sequence_field_schema_js_1.sequenceVisualStyleSchema,
-    hidden: sequence_field_schema_js_1.hiddenField,
+    ...interactivity_schema_js_1.baseSchema,
+    ...interactivity_schema_js_1.transformSchema,
 };
-const HtmlInCanvasWrapped = (0, wrap_in_schema_js_1.wrapInSchema)({
+const HtmlInCanvasWrapped = (0, with_interactivity_schema_js_1.withInteractivitySchema)({
     Component: HtmlInCanvasInner,
     componentIdentity: 'dev.remotion.remotion.HtmlInCanvas',
     schema: htmlInCanvasSchema,

package/dist/cjs/Img.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { EffectsProp } from './effects/effect-types.js';
-import type { SequenceProps } from './Sequence.js';
+import type { InteractiveBaseProps } from './Interactive.js';
 type NativeImgProps = Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, 'src'>;
 export type ImgProps = NativeImgProps & {
     readonly maxRetries?: number;
@@ -16,7 +16,7 @@ export type ImgProps = NativeImgProps & {
      * @deprecated For internal use only
      */
     readonly stack?: string;
-} & Pick<SequenceProps, 'durationInFrames' | 'from' | 'freeze' | 'hidden'>;
+} & InteractiveBaseProps;
 export declare const imgSchema: {
     readonly 'style.transformOrigin': {
         readonly type: "transform-origin";
@@ -71,7 +71,9 @@ export declare const imgSchema: {
         readonly step: 1;
         readonly hiddenFromList: true;
     };
-    readonly hidden: import("./sequence-field-schema.js").SequenceFieldSchema;
+    readonly hidden: import("./interactivity-schema.js").BooleanFieldSchema;
+    readonly name: import("./interactivity-schema.js").HiddenFieldSchema;
+    readonly showInTimeline: import("./interactivity-schema.js").HiddenFieldSchema;
 };
 export declare const Img: React.ComponentType<NativeImgProps & {
     readonly maxRetries?: number | undefined;
@@ -87,5 +89,5 @@ export declare const Img: React.ComponentType<NativeImgProps & {
      * @deprecated For internal use only
      */
     readonly stack?: string | undefined;
-} & Pick<SequenceProps, "durationInFrames" | "freeze" | "from" | "hidden">>;
+} & InteractiveBaseProps>;
 export {};

package/dist/cjs/Img.js

@@ -6,15 +6,15 @@ const react_1 = require("react");
 const index_js_1 = require("./canvas-image/index.js");
 const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
 const get_cross_origin_value_js_1 = require("./get-cross-origin-value.js");
+const interactivity_schema_js_1 = require("./interactivity-schema.js");
 const prefetch_js_1 = require("./prefetch.js");
-const sequence_field_schema_js_1 = require("./sequence-field-schema.js");
 const Sequence_js_1 = require("./Sequence.js");
 const SequenceContext_js_1 = require("./SequenceContext.js");
 const truncate_src_for_label_js_1 = require("./truncate-src-for-label.js");
 const use_buffer_state_js_1 = require("./use-buffer-state.js");
 const use_delay_render_js_1 = require("./use-delay-render.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
-const wrap_in_schema_js_1 = require("./wrap-in-schema.js");
+const with_interactivity_schema_js_1 = require("./with-interactivity-schema.js");
 function exponentialBackoff(errorCount) {
     return 1000 * 2 ** (errorCount - 1);
 }
@@ -183,19 +183,16 @@ const ImgContent = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRende
     // src gets set once we've loaded and decoded the image.
     return (jsx_runtime_1.jsx("img", { ...props, ref: imageCallbackRef, crossOrigin: crossOriginValue, onError: didGetError, decoding: isRendering ? 'sync' : decoding }));
 };
-const NativeImgInner = ({ hidden, name, stack, showInTimeline, src, from, durationInFrames, freeze, _experimentalControls: controls, _remotionInternalRefForOutline: refForOutline, ...props }) => {
+const NativeImgInner = ({ hidden, name, stack, showInTimeline, src, from, durationInFrames, freeze, controls, outlineRef: refForOutline, ...props }) => {
     if (!src) {
         throw new Error('No "src" prop was passed to <Img>.');
     }
-    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, freeze: freeze, _remotionInternalStack: stack, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", _remotionInternalIsMedia: { type: 'image', src }, name: name !== null && name !== void 0 ? name : '<Img>', _experimentalControls: controls, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, hidden: hidden, _remotionInternalRefForOutline: refForOutline, children: jsx_runtime_1.jsx(ImgContent, { src: src, refForOutline: refForOutline, ...props }) }));
+    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, freeze: freeze, _remotionInternalStack: stack, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", _remotionInternalIsMedia: { type: 'image', src }, name: name !== null && name !== void 0 ? name : '<Img>', controls: controls, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, hidden: hidden, outlineRef: refForOutline, children: jsx_runtime_1.jsx(ImgContent, { src: src, refForOutline: refForOutline, ...props }) }));
 };
 const CanvasImageWithPrivateProps = index_js_1.CanvasImage;
 exports.imgSchema = {
-    durationInFrames: sequence_field_schema_js_1.durationInFramesField,
-    from: sequence_field_schema_js_1.fromField,
-    freeze: sequence_field_schema_js_1.freezeField,
-    ...sequence_field_schema_js_1.sequenceVisualStyleSchema,
-    hidden: sequence_field_schema_js_1.hiddenField,
+    ...interactivity_schema_js_1.baseSchema,
+    ...interactivity_schema_js_1.transformSchema,
 };
 const imgCanvasFallbackIncompatibleProps = new Set([
     'alt',
@@ -236,11 +233,11 @@ const getFitFromObjectFit = (style) => {
     }
     return undefined;
 };
-const ImgInner = ({ effects = [], ref, hidden, name, stack, showInTimeline, src, from, durationInFrames, freeze, _experimentalControls: controls, width, height, className, style, id, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...props }) => {
+const ImgInner = ({ effects = [], ref, hidden, name, stack, showInTimeline, src, from, durationInFrames, freeze, controls, width, height, className, style, id, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...props }) => {
     var _a;
     const refForOutline = (0, react_1.useRef)(null);
     if (effects.length === 0) {
-        return (jsx_runtime_1.jsx(NativeImgInner, { ...props, ref: ref, hidden: hidden, name: name, stack: stack, showInTimeline: showInTimeline, src: src, from: from, durationInFrames: durationInFrames, freeze: freeze, _experimentalControls: controls, width: width, height: height, className: className, style: style, id: id, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, _remotionInternalRefForOutline: refForOutline }));
+        return (jsx_runtime_1.jsx(NativeImgInner, { ...props, ref: ref, hidden: hidden, name: name, stack: stack, showInTimeline: showInTimeline, src: src, from: from, durationInFrames: durationInFrames, freeze: freeze, controls: controls, width: width, height: height, className: className, style: style, id: id, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, outlineRef: refForOutline }));
     }
     if (!src) {
         throw new Error('No "src" prop was passed to <Img>.');
@@ -255,13 +252,13 @@ const ImgInner = ({ effects = [], ref, hidden, name, stack, showInTimeline, src,
     const canvasHeight = typeof height === 'number' ? height : undefined;
     const canvasProps = props;
     const canvasFit = (_a = getFitFromObjectFit(style)) !== null && _a !== void 0 ? _a : 'fill';
-    return (jsx_runtime_1.jsx(CanvasImageWithPrivateProps, { src: src, width: canvasWidth, height: canvasHeight, fit: canvasFit, effects: effects, className: className, style: style, id: id, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, from: from, durationInFrames: durationInFrames, freeze: freeze, hidden: hidden, name: name !== null && name !== void 0 ? name : '<Img>', showInTimeline: showInTimeline, stack: stack, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", _experimentalControls: controls, _remotionInternalRefForOutline: refForOutline, ...canvasProps }));
+    return (jsx_runtime_1.jsx(CanvasImageWithPrivateProps, { src: src, width: canvasWidth, height: canvasHeight, fit: canvasFit, effects: effects, className: className, style: style, id: id, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, from: from, durationInFrames: durationInFrames, freeze: freeze, hidden: hidden, name: name !== null && name !== void 0 ? name : '<Img>', showInTimeline: showInTimeline, stack: stack, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/img", controls: controls, outlineRef: refForOutline, ...canvasProps }));
 };
 /*
  * @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)({
+exports.Img = (0, with_interactivity_schema_js_1.withInteractivitySchema)({
     Component: ImgInner,
     componentIdentity: 'dev.remotion.remotion.Img',
     schema: exports.imgSchema,

package/dist/cjs/Interactive.d.ts

@@ -1,10 +1,15 @@
 import React from 'react';
-import type { SequenceProps } from './Sequence.js';
+import type { SequenceControls } from './CompositionManager.js';
+import { type InteractivitySchema } from './interactivity-schema.js';
+import type { AbsoluteFillLayout, SequenceProps } from './Sequence.js';
 type InteractiveHtmlTag = 'a' | 'article' | 'aside' | 'button' | 'code' | 'div' | 'em' | 'footer' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'header' | 'label' | 'li' | 'main' | 'nav' | 'ol' | 'p' | 'pre' | 'section' | 'small' | 'span' | 'strong' | 'ul';
 type InteractiveSvgTag = 'circle' | 'ellipse' | 'g' | 'line' | 'path' | 'rect' | 'svg' | 'text';
 type InteractiveTag = InteractiveHtmlTag | InteractiveSvgTag;
 type ElementForTag<Tag extends InteractiveTag> = Tag extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[Tag] : Tag extends keyof SVGElementTagNameMap ? SVGElementTagNameMap[Tag] : Element;
-type InteractiveSequenceProps = Pick<SequenceProps, 'durationInFrames' | 'from' | 'freeze' | 'hidden' | 'name' | 'showInTimeline'> & {
+export type InteractiveBaseProps = Pick<SequenceProps, 'durationInFrames' | 'from' | 'freeze' | 'hidden' | 'name' | 'showInTimeline'>;
+export type InteractiveTransformProps = Pick<AbsoluteFillLayout, 'style'>;
+export type InteractivePremountProps = Pick<AbsoluteFillLayout, 'premountFor' | 'postmountFor' | 'styleWhilePremounted' | 'styleWhilePostmounted'>;
+type InteractiveSequenceProps = InteractiveBaseProps & {
     /**
      * @deprecated For internal use only
      */
@@ -16,6 +21,186 @@ type InteractiveElementComponent<Tag extends InteractiveTag> = React.ComponentTy
  * @description HTML and SVG elements that are registered in the Remotion Studio timeline and can be visually edited.
  */
 export declare const Interactive: {
+    baseSchema: {
+        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 freeze: {
+            readonly type: "number";
+            readonly default: null;
+            readonly step: 1;
+            readonly hiddenFromList: true;
+        };
+        readonly hidden: import("./interactivity-schema.js").BooleanFieldSchema;
+        readonly name: import("./interactivity-schema.js").HiddenFieldSchema;
+        readonly showInTimeline: import("./interactivity-schema.js").HiddenFieldSchema;
+    };
+    transformSchema: {
+        readonly 'style.transformOrigin': {
+            readonly type: "transform-origin";
+            readonly step: 1;
+            readonly default: "50% 50%";
+            readonly description: "Transform origin";
+        };
+        readonly 'style.translate': {
+            readonly type: "translate";
+            readonly step: 1;
+            readonly default: "0px 0px";
+            readonly description: "Offset";
+        };
+        readonly 'style.scale': {
+            readonly type: "scale";
+            readonly max: 100;
+            readonly step: 0.01;
+            readonly default: 1;
+            readonly description: "Scale";
+        };
+        readonly 'style.rotate': {
+            readonly type: "rotation-css";
+            readonly step: 1;
+            readonly default: "0deg";
+            readonly description: "Rotation";
+        };
+        readonly 'style.opacity': {
+            readonly type: "number";
+            readonly min: 0;
+            readonly max: 1;
+            readonly step: 0.01;
+            readonly default: 1;
+            readonly description: "Opacity";
+            readonly hiddenFromList: false;
+        };
+    };
+    premountSchema: {
+        readonly premountFor: {
+            readonly type: "number";
+            readonly default: 0;
+            readonly description: "Premount For";
+            readonly min: 0;
+            readonly step: 1;
+            readonly hiddenFromList: false;
+        };
+        readonly postmountFor: {
+            readonly type: "number";
+            readonly default: 0;
+            readonly min: 0;
+            readonly step: 1;
+            readonly hiddenFromList: true;
+        };
+        readonly styleWhilePremounted: {
+            readonly type: "hidden";
+        };
+        readonly styleWhilePostmounted: {
+            readonly type: "hidden";
+        };
+    };
+    sequenceSchema: {
+        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 freeze: {
+            readonly type: "number";
+            readonly default: null;
+            readonly step: 1;
+            readonly hiddenFromList: true;
+        };
+        readonly hidden: import("./interactivity-schema.js").BooleanFieldSchema;
+        readonly name: import("./interactivity-schema.js").HiddenFieldSchema;
+        readonly showInTimeline: import("./interactivity-schema.js").HiddenFieldSchema;
+        readonly layout: {
+            readonly type: "enum";
+            readonly default: "absolute-fill";
+            readonly description: "Layout";
+            readonly variants: {
+                readonly 'absolute-fill': {
+                    readonly 'style.transformOrigin': {
+                        readonly type: "transform-origin";
+                        readonly step: 1;
+                        readonly default: "50% 50%";
+                        readonly description: "Transform origin";
+                    };
+                    readonly 'style.translate': {
+                        readonly type: "translate";
+                        readonly step: 1;
+                        readonly default: "0px 0px";
+                        readonly description: "Offset";
+                    };
+                    readonly 'style.scale': {
+                        readonly type: "scale";
+                        readonly max: 100;
+                        readonly step: 0.01;
+                        readonly default: 1;
+                        readonly description: "Scale";
+                    };
+                    readonly 'style.rotate': {
+                        readonly type: "rotation-css";
+                        readonly step: 1;
+                        readonly default: "0deg";
+                        readonly description: "Rotation";
+                    };
+                    readonly 'style.opacity': {
+                        readonly type: "number";
+                        readonly min: 0;
+                        readonly max: 1;
+                        readonly step: 0.01;
+                        readonly default: 1;
+                        readonly description: "Opacity";
+                        readonly hiddenFromList: false;
+                    };
+                    readonly premountFor: {
+                        readonly type: "number";
+                        readonly default: 0;
+                        readonly description: "Premount For";
+                        readonly min: 0;
+                        readonly step: 1;
+                        readonly hiddenFromList: false;
+                    };
+                    readonly postmountFor: {
+                        readonly type: "number";
+                        readonly default: 0;
+                        readonly min: 0;
+                        readonly step: 1;
+                        readonly hiddenFromList: true;
+                    };
+                    readonly styleWhilePremounted: {
+                        readonly type: "hidden";
+                    };
+                    readonly styleWhilePostmounted: {
+                        readonly type: "hidden";
+                    };
+                };
+                readonly none: {};
+            };
+        };
+    };
+    withSchema: <S extends InteractivitySchema, Props extends object>({ Component, componentIdentity, schema, supportsEffects, }: {
+        Component: React.ComponentType<Props & {
+            readonly controls: SequenceControls | undefined;
+        }>;
+        componentIdentity: string | null;
+        schema: S;
+        supportsEffects: boolean;
+    }) => React.ComponentType<Props>;
     A: InteractiveElementComponent<"a">;
     Article: InteractiveElementComponent<"article">;
     Aside: InteractiveElementComponent<"aside">;

package/dist/cjs/Interactive.js

@@ -37,15 +37,12 @@ exports.Interactive = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
-const sequence_field_schema_js_1 = require("./sequence-field-schema.js");
+const interactivity_schema_js_1 = require("./interactivity-schema.js");
 const Sequence_js_1 = require("./Sequence.js");
-const wrap_in_schema_js_1 = require("./wrap-in-schema.js");
+const with_interactivity_schema_js_1 = require("./with-interactivity-schema.js");
 const interactiveElementSchema = {
-    durationInFrames: sequence_field_schema_js_1.durationInFramesField,
-    from: sequence_field_schema_js_1.fromField,
-    freeze: sequence_field_schema_js_1.freezeField,
-    ...sequence_field_schema_js_1.sequenceVisualStyleSchema,
-    hidden: sequence_field_schema_js_1.hiddenField,
+    ...interactivity_schema_js_1.baseSchema,
+    ...interactivity_schema_js_1.transformSchema,
 };
 const setRef = (ref, value) => {
     if (typeof ref === 'function') {
@@ -57,19 +54,19 @@ const setRef = (ref, value) => {
 };
 const makeInteractiveElement = (tag, displayName) => {
     const Inner = (0, react_1.forwardRef)((propsWithControls, ref) => {
-        const { durationInFrames, from, freeze, hidden, name, showInTimeline, stack, _experimentalControls, ...props } = propsWithControls;
+        const { durationInFrames, from, freeze, hidden, name, showInTimeline, stack, controls, ...props } = propsWithControls;
         const refForOutline = (0, react_1.useRef)(null);
         const callbackRef = (0, react_1.useCallback)((element) => {
             refForOutline.current = element;
             setRef(ref, element);
         }, [ref]);
-        return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, freeze: freeze, hidden: hidden, name: name !== null && name !== void 0 ? name : displayName, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, _experimentalControls: _experimentalControls, _remotionInternalStack: stack, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/interactive", _remotionInternalRefForOutline: refForOutline, children: react_1.default.createElement(tag, {
+        return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, freeze: freeze, hidden: hidden, name: name !== null && name !== void 0 ? name : displayName, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, controls: controls, _remotionInternalStack: stack, _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/interactive", outlineRef: refForOutline, children: react_1.default.createElement(tag, {
                 ...props,
                 ref: callbackRef,
             }) }));
     });
     Inner.displayName = displayName;
-    const Wrapped = (0, wrap_in_schema_js_1.wrapInSchema)({
+    const Wrapped = (0, with_interactivity_schema_js_1.withInteractivitySchema)({
         Component: Inner,
         componentIdentity: `dev.remotion.remotion.${displayName.slice(1, -1)}`,
         schema: interactiveElementSchema,
@@ -83,6 +80,11 @@ const makeInteractiveElement = (tag, displayName) => {
  * @description HTML and SVG elements that are registered in the Remotion Studio timeline and can be visually edited.
  */
 exports.Interactive = {
+    baseSchema: interactivity_schema_js_1.baseSchema,
+    transformSchema: interactivity_schema_js_1.transformSchema,
+    premountSchema: interactivity_schema_js_1.premountSchema,
+    sequenceSchema: interactivity_schema_js_1.sequenceSchema,
+    withSchema: with_interactivity_schema_js_1.withInteractivitySchema,
     A: makeInteractiveElement('a', '<Interactive.A>'),
     Article: makeInteractiveElement('article', '<Interactive.Article>'),
     Aside: makeInteractiveElement('aside', '<Interactive.Aside>'),

package/dist/cjs/Sequence.d.ts

@@ -23,7 +23,7 @@ export type SequencePropsWithoutDuration = {
     readonly name?: string;
     readonly showInTimeline?: boolean;
     readonly hidden?: boolean;
-    readonly _experimentalControls?: SequenceControls;
+    readonly controls?: SequenceControls;
     readonly _remotionInternalEffects?: readonly EffectDefinition<unknown>[];
     /**
      * @deprecated For internal use only.
@@ -64,9 +64,10 @@ export type SequencePropsWithoutDuration = {
         src: string;
     };
     /**
-     * @deprecated For internal use only.
+     * A React ref pointing to the element that Remotion Studio should use for
+     * drawing the selection outline in the preview.
      */
-    readonly _remotionInternalRefForOutline?: React.RefObject<Element | null> | null;
+    readonly outlineRef?: React.RefObject<Element | null> | null;
 } & LayoutAndStyle;
 export type SequenceProps = {
     readonly durationInFrames?: number;

package/dist/cjs/Sequence.js

@@ -6,9 +6,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const AbsoluteFill_js_1 = require("./AbsoluteFill.js");
 const freeze_js_1 = require("./freeze.js");
+const interactivity_schema_js_1 = require("./interactivity-schema.js");
 const nonce_js_1 = require("./nonce.js");
 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");
@@ -17,10 +17,10 @@ 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 with_interactivity_schema_js_1 = require("./with-interactivity-schema.js");
 const EMPTY_EFFECTS = [];
-const RegularSequenceRefForwardingFunction = ({ from = 0, freeze, 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: passedRefForOutline, ...other }, ref) => {
-    var _a, _b;
+const RegularSequenceRefForwardingFunction = ({ from = 0, freeze, durationInFrames = Infinity, children, name, height, width, showInTimeline = true, hidden = false, controls, _remotionInternalEffects, _remotionInternalLoopDisplay: loopDisplay, _remotionInternalStack: stack, _remotionInternalDocumentationLink: documentationLink, _remotionInternalPremountDisplay: premountDisplay, _remotionInternalPostmountDisplay: postmountDisplay, _remotionInternalIsMedia: isMedia, outlineRef: passedRefForOutline, ...other }, ref) => {
+    var _a, _b, _c;
     const { layout = 'absolute-fill' } = other;
     const [id] = (0, react_1.useState)(() => String(Math.random()));
     const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
@@ -148,6 +148,25 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, freeze, durationInFram
     // and if it changes, it would lead to-remounting of the sequence.
     const stackRef = (0, react_1.useRef)(null);
     stackRef.current = stack !== null && stack !== void 0 ? stack : inheritedStack;
+    const registeredFrozenFrame = typeof freeze === 'number' ? freeze : null;
+    const parentCumulatedNegativeFrom = (_c = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.cumulatedNegativeFrom) !== null && _c !== void 0 ? _c : 0;
+    const startMediaFrom = isMedia && isMedia.type !== 'image'
+        ? isMedia.data.startMediaFrom +
+            parentCumulatedNegativeFrom -
+            cumulatedNegativeFrom
+        : null;
+    const mediaFrameAtSequenceZero = isMedia && isMedia.type !== 'image'
+        ? isMedia.data.startMediaFrom + parentCumulatedNegativeFrom
+        : null;
+    const frozenMediaFrame = isMedia && isMedia.type !== 'image' && mediaFrameAtSequenceZero !== null
+        ? registeredFrozenFrame === null
+            ? null
+            : mediaFrameAtSequenceZero +
+                (loopDisplay
+                    ? registeredFrozenFrame % loopDisplay.durationInFrames
+                    : registeredFrozenFrame) *
+                    isMedia.data.playbackRate
+        : null;
     (0, react_1.useEffect)(() => {
         var _a, _b, _c;
         if (!env.isStudio) {
@@ -175,6 +194,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, freeze, durationInFram
                     getStack: () => stackRef.current,
                     refForOutline: refForOutline !== null && refForOutline !== void 0 ? refForOutline : null,
                     isInsideSeries,
+                    frozenFrame: registeredFrozenFrame,
                 });
             }
             else {
@@ -198,10 +218,12 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, freeze, durationInFram
                     showInTimeline,
                     src: isMedia.data.src,
                     getStack: () => stackRef.current,
-                    startMediaFrom: isMedia.data.startMediaFrom,
+                    startMediaFrom: startMediaFrom !== null && startMediaFrom !== void 0 ? startMediaFrom : isMedia.data.startMediaFrom,
                     volume: isMedia.data.volumes,
                     refForOutline: refForOutline !== null && refForOutline !== void 0 ? refForOutline : null,
                     isInsideSeries,
+                    frozenFrame: registeredFrozenFrame,
+                    frozenMediaFrame,
                 });
             }
             return () => {
@@ -227,6 +249,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, freeze, durationInFram
             effects: _remotionInternalEffects !== null && _remotionInternalEffects !== void 0 ? _remotionInternalEffects : EMPTY_EFFECTS,
             refForOutline: refForOutline !== null && refForOutline !== void 0 ? refForOutline : null,
             isInsideSeries,
+            frozenFrame: registeredFrozenFrame,
         });
         return () => {
             unregisterSequence(id);
@@ -254,6 +277,9 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, freeze, durationInFram
         resolvedDocumentationLink,
         refForOutline,
         isInsideSeries,
+        registeredFrozenFrame,
+        startMediaFrom,
+        frozenMediaFrame,
     ]);
     // Ceil to support floats
     // https://github.com/remotion-dev/remotion/issues/2958
@@ -349,15 +375,15 @@ exports.SequenceWithoutSchema = SequenceInner;
  * @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)({
+exports.Sequence = (0, with_interactivity_schema_js_1.withInteractivitySchema)({
     Component: SequenceInner,
     componentIdentity: 'dev.remotion.remotion.Sequence',
-    schema: sequence_field_schema_js_1.sequenceSchema,
+    schema: interactivity_schema_js_1.sequenceSchema,
     supportsEffects: false,
 });
-exports.SequenceWithoutFrom = (0, wrap_in_schema_js_1.wrapInSchema)({
+exports.SequenceWithoutFrom = (0, with_interactivity_schema_js_1.withInteractivitySchema)({
     Component: SequenceInner,
     componentIdentity: null,
-    schema: sequence_field_schema_js_1.sequenceSchemaWithoutFrom,
+    schema: interactivity_schema_js_1.sequenceSchemaWithoutFrom,
     supportsEffects: false,
 });

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

@@ -2,10 +2,9 @@ import type React from 'react';
 import type { SequenceControls } from '../CompositionManager.js';
 import type { EffectsProp } from '../effects/effect-types.js';
 import type { RemotionAnimatedImageProps } from './props';
-export declare const AnimatedImage: React.ComponentType<Omit<import("../Sequence.js").SequenceProps, "_remotionInternalEffects" | "children" | "durationInFrames" | "layout"> & RemotionAnimatedImageProps & {
-    readonly durationInFrames?: number | undefined;
+export declare const AnimatedImage: React.ComponentType<import("../Interactive.js").InteractiveBaseProps & RemotionAnimatedImageProps & {
     readonly effects?: EffectsProp | undefined;
 } & {
-    readonly _experimentalControls?: SequenceControls | undefined;
+    readonly controls?: SequenceControls | undefined;
     readonly ref?: React.Ref<HTMLCanvasElement> | undefined;
 }>;