remotion 4.0.478 → 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;
@@ -54,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;

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,9 +17,9 @@ 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) => {
+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()));
@@ -375,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;
 }>;

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

@@ -6,20 +6,18 @@ const react_1 = require("react");
 const cancel_render_js_1 = require("../cancel-render.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_current_frame_js_1 = require("../use-current-frame.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");
 const canvas_1 = require("./canvas");
 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,
-    freeze: sequence_field_schema_js_1.freezeField,
+    ...interactivity_schema_js_1.baseSchema,
     playbackRate: {
         type: 'number',
         min: 0,
@@ -30,8 +28,7 @@ const animatedImageSchema = {
         hiddenFromList: false,
         keyframable: false,
     },
-    ...sequence_field_schema_js_1.sequenceVisualStyleSchema,
-    hidden: sequence_field_schema_js_1.hiddenField,
+    ...interactivity_schema_js_1.transformSchema,
 };
 const AnimatedImageContent = (0, react_1.forwardRef)(({ src, width, height, onError, loopBehavior = 'loop', playbackRate = 1, fit = 'fill', requestInit, effects, controls, ...props }, canvasRef) => {
     var _a;
@@ -153,7 +150,7 @@ const AnimatedImageContent = (0, react_1.forwardRef)(({ src, width, height, onEr
     return (jsx_runtime_1.jsx(canvas_1.Canvas, { ref: ref, width: width, height: height, fit: fit, effects: memoizedEffects, ...props }));
 });
 AnimatedImageContent.displayName = 'AnimatedImageContent';
-const AnimatedImageInner = ({ src, width, height, onError, fit, playbackRate, loopBehavior, id, className, style, durationInFrames, requestInit, effects = [], _experimentalControls: controls, ref, ...sequenceProps }) => {
+const AnimatedImageInner = ({ src, width, height, onError, fit, playbackRate, loopBehavior, id, className, style, durationInFrames, requestInit, effects = [], controls, ref, ...sequenceProps }) => {
     const { durationInFrames: videoDuration } = (0, use_video_config_js_1.useVideoConfig)();
     const resolvedDuration = durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : videoDuration;
     const actualRef = (0, react_1.useRef)(null);
@@ -174,9 +171,9 @@ const AnimatedImageInner = ({ src, width, height, onError, fit, playbackRate, lo
         style,
         requestInit,
     };
-    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 }) }));
+    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", durationInFrames: resolvedDuration, name: "<AnimatedImage>", _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/animatedimage", controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, ...sequenceProps, outlineRef: actualRef, children: jsx_runtime_1.jsx(AnimatedImageContent, { ...animatedImageProps, ref: actualRef, effects: effects, controls: controls }) }));
 };
-exports.AnimatedImage = (0, wrap_in_schema_js_1.wrapInSchema)({
+exports.AnimatedImage = (0, with_interactivity_schema_js_1.withInteractivitySchema)({
     Component: AnimatedImageInner,
     componentIdentity: 'dev.remotion.remotion.AnimatedImage',
     schema: animatedImageSchema,

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

@@ -1,6 +1,6 @@
 import type { ImageFit } from '../calculate-image-fit.js';
 import type { EffectsProp } from '../effects/effect-types.js';
-import type { SequenceProps } from '../Sequence.js';
+import type { InteractiveBaseProps } from '../Interactive.js';
 export type RemotionAnimatedImageLoopBehavior = 'loop' | 'pause-after-finish' | 'clear-after-finish';
 export type RemotionAnimatedImageProps = {
     src: string;
@@ -15,8 +15,7 @@ export type RemotionAnimatedImageProps = {
     className?: string;
     requestInit?: RequestInit;
 };
-export type AnimatedImageProps = Omit<SequenceProps, 'children' | 'durationInFrames' | 'layout' | '_remotionInternalEffects'> & RemotionAnimatedImageProps & {
-    readonly durationInFrames?: number;
+export type AnimatedImageProps = InteractiveBaseProps & RemotionAnimatedImageProps & {
     readonly effects?: EffectsProp;
 };
 export type AnimatedImageFillMode = ImageFit;