remotion 4.0.494 → 4.0.496

package/dist/cjs/HtmlInCanvas.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.HtmlInCanvas = exports.htmlInCanvasSchema = exports.HTML_IN_CANVAS_UNSUPPORTED_MESSAGE = exports.isHtmlInCanvasSupported = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const delay_render_js_1 = require("./delay-render.js");
 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");
@@ -87,7 +86,7 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
     const resolvedPixelDensity = resolveHtmlInCanvasPixelDensity(pixelDensity);
     const canvasWidth = Math.ceil(width * resolvedPixelDensity);
     const canvasHeight = Math.ceil(height * resolvedPixelDensity);
-    const { continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
+    const { delayRender, continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
     const { isClientSideRendering, isRendering } = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     const canRetryMissingPaintRecord = !isRendering || isClientSideRendering;
     const usesDirectLayoutCanvas = onPaint === undefined && onInit === undefined;
@@ -144,7 +143,7 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
             if (!placeholderCanvas) {
                 throw new Error('Canvas not found');
             }
-            const handle = (0, delay_render_js_1.delayRender)('onPaint');
+            const handle = delayRender('onPaint');
             if (!initializedRef.current) {
                 const currentOnInit = onInitRef.current;
                 if (!currentOnInit) {
@@ -265,6 +264,7 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
         chainState,
         continueRender,
         cancelRender,
+        delayRender,
         resolvedPixelDensity,
         canRetryMissingPaintRecord,
     ]);
@@ -323,14 +323,14 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
         if (!canvas) {
             return;
         }
-        const handle = (0, delay_render_js_1.delayRender)('waiting for first paint after canvas resize');
+        const handle = delayRender('waiting for first paint after canvas resize');
         canvas.addEventListener('paint', () => {
             continueRender(handle);
         }, { once: true });
         return () => {
             continueRender(handle);
         };
-    }, [width, height, continueRender, canvasSizeKey]);
+    }, [width, height, continueRender, delayRender, canvasSizeKey]);
     const innerStyle = (0, react_1.useMemo)(() => {
         return {
             width,

package/dist/cjs/Img.js

@@ -187,7 +187,9 @@ const ImgContent = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRende
         requestsVideoFrame: false,
         isClientSideRendering,
     });
-    // src gets set once we've loaded and decoded the image.
+    // `src` is assigned imperatively to this element in the layout effect above.
+    // The element may paint while `decode()` is pending; `delayRender()` only
+    // blocks frame rendering.
     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, trimBefore, durationInFrames, freeze, controls, outlineRef: refForOutline, ...props }) => {

package/dist/cjs/Interactive.d.ts

@@ -175,6 +175,7 @@ export declare const Interactive: {
             readonly min: 0;
             readonly step: 1;
             readonly hiddenFromList: false;
+            readonly keyframable: false;
         };
         readonly postmountFor: {
             readonly type: "number";
@@ -182,12 +183,7 @@ export declare const Interactive: {
             readonly min: 0;
             readonly step: 1;
             readonly hiddenFromList: true;
-        };
-        readonly styleWhilePremounted: {
-            readonly type: "hidden";
-        };
-        readonly styleWhilePostmounted: {
-            readonly type: "hidden";
+            readonly keyframable: false;
         };
     };
     sequenceSchema: {
@@ -268,6 +264,7 @@ export declare const Interactive: {
                         readonly min: 0;
                         readonly step: 1;
                         readonly hiddenFromList: false;
+                        readonly keyframable: false;
                     };
                     readonly postmountFor: {
                         readonly type: "number";
@@ -275,6 +272,7 @@ export declare const Interactive: {
                         readonly min: 0;
                         readonly step: 1;
                         readonly hiddenFromList: true;
+                        readonly keyframable: false;
                     };
                     readonly styleWhilePremounted: {
                         readonly type: "hidden";

package/dist/cjs/Interactive.js

@@ -58,6 +58,9 @@ const makeRemotionComponentIdentity = ({ packageName, componentName, }) => {
 const interactiveElementSchema = {
     ...interactivity_schema_js_1.baseSchema,
     ...interactivity_schema_js_1.transformSchema,
+};
+const interactiveTextElementSchema = {
+    ...interactiveElementSchema,
     ...interactivity_schema_js_1.textSchema,
     ...interactivity_schema_js_1.textContentSchema,
 };
@@ -74,7 +77,7 @@ const withSchema = (options) => {
     (0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(Wrapped);
     return Wrapped;
 };
-const makeInteractiveElement = (tag, displayName) => {
+const makeInteractiveElement = (tag, displayName, schema) => {
     const Inner = (0, react_1.forwardRef)((propsWithControls, ref) => {
         const { durationInFrames, from, trimBefore, freeze, hidden, name, showInTimeline, stack, controls, ...props } = propsWithControls;
         const refForOutline = (0, react_1.useRef)(null);
@@ -95,12 +98,18 @@ const makeInteractiveElement = (tag, displayName) => {
             packageName: 'remotion',
             componentName: displayName.slice(1, -1),
         }),
-        schema: interactiveElementSchema,
+        schema,
         supportsEffects: false,
     });
     Wrapped.displayName = displayName;
     return Wrapped;
 };
+const makeInteractiveTextElement = (tag, displayName) => {
+    return makeInteractiveElement(tag, displayName, interactiveTextElementSchema);
+};
+const makeInteractiveNonTextElement = (tag, displayName) => {
+    return makeInteractiveElement(tag, displayName, interactiveElementSchema);
+};
 /**
  * @description HTML and SVG elements that are registered in the Remotion Studio timeline and can be visually edited.
  */
@@ -112,39 +121,39 @@ exports.Interactive = {
     sequenceSchema: interactivity_schema_js_1.sequenceSchema,
     withSchema,
     _internalMakeRemotionComponentIdentity: makeRemotionComponentIdentity,
-    A: makeInteractiveElement('a', '<Interactive.A>'),
-    Article: makeInteractiveElement('article', '<Interactive.Article>'),
-    Aside: makeInteractiveElement('aside', '<Interactive.Aside>'),
-    Button: makeInteractiveElement('button', '<Interactive.Button>'),
-    Circle: makeInteractiveElement('circle', '<Interactive.Circle>'),
-    Code: makeInteractiveElement('code', '<Interactive.Code>'),
-    Div: makeInteractiveElement('div', '<Interactive.Div>'),
-    Ellipse: makeInteractiveElement('ellipse', '<Interactive.Ellipse>'),
-    Em: makeInteractiveElement('em', '<Interactive.Em>'),
-    Footer: makeInteractiveElement('footer', '<Interactive.Footer>'),
-    G: makeInteractiveElement('g', '<Interactive.G>'),
-    H1: makeInteractiveElement('h1', '<Interactive.H1>'),
-    H2: makeInteractiveElement('h2', '<Interactive.H2>'),
-    H3: makeInteractiveElement('h3', '<Interactive.H3>'),
-    H4: makeInteractiveElement('h4', '<Interactive.H4>'),
-    H5: makeInteractiveElement('h5', '<Interactive.H5>'),
-    H6: makeInteractiveElement('h6', '<Interactive.H6>'),
-    Header: makeInteractiveElement('header', '<Interactive.Header>'),
-    Label: makeInteractiveElement('label', '<Interactive.Label>'),
-    Li: makeInteractiveElement('li', '<Interactive.Li>'),
-    Line: makeInteractiveElement('line', '<Interactive.Line>'),
-    Main: makeInteractiveElement('main', '<Interactive.Main>'),
-    Nav: makeInteractiveElement('nav', '<Interactive.Nav>'),
-    Ol: makeInteractiveElement('ol', '<Interactive.Ol>'),
-    P: makeInteractiveElement('p', '<Interactive.P>'),
-    Path: makeInteractiveElement('path', '<Interactive.Path>'),
-    Pre: makeInteractiveElement('pre', '<Interactive.Pre>'),
-    Rect: makeInteractiveElement('rect', '<Interactive.Rect>'),
-    Section: makeInteractiveElement('section', '<Interactive.Section>'),
-    Small: makeInteractiveElement('small', '<Interactive.Small>'),
-    Span: makeInteractiveElement('span', '<Interactive.Span>'),
-    Strong: makeInteractiveElement('strong', '<Interactive.Strong>'),
-    Svg: makeInteractiveElement('svg', '<Interactive.Svg>'),
-    Text: makeInteractiveElement('text', '<Interactive.Text>'),
-    Ul: makeInteractiveElement('ul', '<Interactive.Ul>'),
+    A: makeInteractiveTextElement('a', '<Interactive.A>'),
+    Article: makeInteractiveTextElement('article', '<Interactive.Article>'),
+    Aside: makeInteractiveTextElement('aside', '<Interactive.Aside>'),
+    Button: makeInteractiveTextElement('button', '<Interactive.Button>'),
+    Circle: makeInteractiveNonTextElement('circle', '<Interactive.Circle>'),
+    Code: makeInteractiveTextElement('code', '<Interactive.Code>'),
+    Div: makeInteractiveTextElement('div', '<Interactive.Div>'),
+    Ellipse: makeInteractiveNonTextElement('ellipse', '<Interactive.Ellipse>'),
+    Em: makeInteractiveTextElement('em', '<Interactive.Em>'),
+    Footer: makeInteractiveTextElement('footer', '<Interactive.Footer>'),
+    G: makeInteractiveNonTextElement('g', '<Interactive.G>'),
+    H1: makeInteractiveTextElement('h1', '<Interactive.H1>'),
+    H2: makeInteractiveTextElement('h2', '<Interactive.H2>'),
+    H3: makeInteractiveTextElement('h3', '<Interactive.H3>'),
+    H4: makeInteractiveTextElement('h4', '<Interactive.H4>'),
+    H5: makeInteractiveTextElement('h5', '<Interactive.H5>'),
+    H6: makeInteractiveTextElement('h6', '<Interactive.H6>'),
+    Header: makeInteractiveTextElement('header', '<Interactive.Header>'),
+    Label: makeInteractiveTextElement('label', '<Interactive.Label>'),
+    Li: makeInteractiveTextElement('li', '<Interactive.Li>'),
+    Line: makeInteractiveNonTextElement('line', '<Interactive.Line>'),
+    Main: makeInteractiveTextElement('main', '<Interactive.Main>'),
+    Nav: makeInteractiveTextElement('nav', '<Interactive.Nav>'),
+    Ol: makeInteractiveTextElement('ol', '<Interactive.Ol>'),
+    P: makeInteractiveTextElement('p', '<Interactive.P>'),
+    Path: makeInteractiveNonTextElement('path', '<Interactive.Path>'),
+    Pre: makeInteractiveTextElement('pre', '<Interactive.Pre>'),
+    Rect: makeInteractiveNonTextElement('rect', '<Interactive.Rect>'),
+    Section: makeInteractiveTextElement('section', '<Interactive.Section>'),
+    Small: makeInteractiveTextElement('small', '<Interactive.Small>'),
+    Span: makeInteractiveTextElement('span', '<Interactive.Span>'),
+    Strong: makeInteractiveTextElement('strong', '<Interactive.Strong>'),
+    Svg: makeInteractiveNonTextElement('svg', '<Interactive.Svg>'),
+    Text: makeInteractiveTextElement('text', '<Interactive.Text>'),
+    Ul: makeInteractiveTextElement('ul', '<Interactive.Ul>'),
 };

package/dist/cjs/Sequence.js

@@ -8,12 +8,11 @@ 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 SequenceContext_js_1 = require("./SequenceContext.js");
 const SequenceManager_js_1 = require("./SequenceManager.js");
 const is_inside_series_js_1 = require("./series/is-inside-series.js");
 const timeline_position_state_js_1 = require("./timeline-position-state.js");
-const use_current_frame_1 = require("./use-current-frame");
+const use_premounting_js_1 = require("./use-premounting.js");
 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");
@@ -343,41 +342,21 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
 };
 const RegularSequence = (0, react_1.forwardRef)(RegularSequenceRefForwardingFunction);
 const PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
-    const parentPremountContext = (0, react_1.useContext)(PremountContext_js_1.PremountContext);
-    const frame = (0, use_current_frame_1.useCurrentFrame)() - parentPremountContext.premountFramesRemaining;
     if (props.layout === 'none') {
         throw new Error('`<Sequence>` with `premountFor` and `postmountFor` props does not support layout="none"');
     }
     const { style: passedStyle, from = 0, durationInFrames = Infinity, premountFor = 0, postmountFor = 0, styleWhilePremounted, styleWhilePostmounted, ...otherProps } = props;
-    const endThreshold = Math.ceil(from + durationInFrames - 1);
-    const premountingActive = frame < from && frame >= from - premountFor;
-    const postmountingActive = frame > endThreshold && frame <= endThreshold + postmountFor;
-    // Determine which freeze frame to use
-    const freezeFrame = premountingActive
-        ? from
-        : postmountingActive
-            ? from + durationInFrames - 1
-            : 0;
-    const isFreezingActive = premountingActive || postmountingActive;
-    const style = (0, react_1.useMemo)(() => {
-        var _a;
-        return {
-            ...passedStyle,
-            opacity: premountingActive || postmountingActive ? 0 : passedStyle === null || passedStyle === void 0 ? void 0 : passedStyle.opacity,
-            pointerEvents: premountingActive || postmountingActive
-                ? 'none'
-                : ((_a = passedStyle === null || passedStyle === void 0 ? void 0 : passedStyle.pointerEvents) !== null && _a !== void 0 ? _a : undefined),
-            ...(premountingActive ? styleWhilePremounted : {}),
-            ...(postmountingActive ? styleWhilePostmounted : {}),
-        };
-    }, [
-        passedStyle,
-        premountingActive,
-        postmountingActive,
-        styleWhilePremounted,
-        styleWhilePostmounted,
-    ]);
-    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isFreezingActive, children: jsx_runtime_1.jsx(SequenceInner, { ref: ref, from: from, durationInFrames: durationInFrames, style: style, _remotionInternalPremountDisplay: premountFor, _remotionInternalPostmountDisplay: postmountFor, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, ...otherProps }) }));
+    const { freezeFrame, isPremountingOrPostmounting, postmountingActive, premountingActive, premountingStyle, } = (0, use_premounting_js_1.usePremounting)({
+        from,
+        durationInFrames,
+        premountFor,
+        postmountFor,
+        style: passedStyle !== null && passedStyle !== void 0 ? passedStyle : null,
+        styleWhilePremounted: styleWhilePremounted !== null && styleWhilePremounted !== void 0 ? styleWhilePremounted : null,
+        styleWhilePostmounted: styleWhilePostmounted !== null && styleWhilePostmounted !== void 0 ? styleWhilePostmounted : null,
+        hideWhilePremounted: 'opacity',
+    });
+    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(SequenceInner, { ref: ref, from: from, durationInFrames: durationInFrames, style: premountingStyle !== null && premountingStyle !== void 0 ? premountingStyle : undefined, _remotionInternalPremountDisplay: premountFor, _remotionInternalPostmountDisplay: postmountFor, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, ...otherProps }) }));
 };
 const PremountedPostmountedSequence = (0, react_1.forwardRef)(PremountedPostmountedSequenceRefForwardingFunction);
 const SequenceRefForwardingFunction = (props, ref) => {

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

@@ -305,6 +305,7 @@ export declare const premountSchema: {
         readonly min: 0;
         readonly step: 1;
         readonly hiddenFromList: false;
+        readonly keyframable: false;
     };
     readonly postmountFor: {
         readonly type: "number";
@@ -312,7 +313,10 @@ export declare const premountSchema: {
         readonly min: 0;
         readonly step: 1;
         readonly hiddenFromList: true;
+        readonly keyframable: false;
     };
+};
+export declare const premountStyleSchema: {
     readonly styleWhilePremounted: {
         readonly type: "hidden";
     };
@@ -328,6 +332,7 @@ export declare const sequencePremountSchema: {
         readonly min: 0;
         readonly step: 1;
         readonly hiddenFromList: false;
+        readonly keyframable: false;
     };
     readonly postmountFor: {
         readonly type: "number";
@@ -335,6 +340,7 @@ export declare const sequencePremountSchema: {
         readonly min: 0;
         readonly step: 1;
         readonly hiddenFromList: true;
+        readonly keyframable: false;
     };
     readonly styleWhilePremounted: {
         readonly type: "hidden";
@@ -386,6 +392,7 @@ export declare const sequenceStyleSchema: {
         readonly min: 0;
         readonly step: 1;
         readonly hiddenFromList: false;
+        readonly keyframable: false;
     };
     readonly postmountFor: {
         readonly type: "number";
@@ -393,6 +400,7 @@ export declare const sequenceStyleSchema: {
         readonly min: 0;
         readonly step: 1;
         readonly hiddenFromList: true;
+        readonly keyframable: false;
     };
     readonly styleWhilePremounted: {
         readonly type: "hidden";
@@ -541,6 +549,7 @@ export declare const sequenceSchema: {
                     readonly min: 0;
                     readonly step: 1;
                     readonly hiddenFromList: false;
+                    readonly keyframable: false;
                 };
                 readonly postmountFor: {
                     readonly type: "number";
@@ -548,6 +557,7 @@ export declare const sequenceSchema: {
                     readonly min: 0;
                     readonly step: 1;
                     readonly hiddenFromList: true;
+                    readonly keyframable: false;
                 };
                 readonly styleWhilePremounted: {
                     readonly type: "hidden";
@@ -657,6 +667,7 @@ export declare const sequenceSchemaWithoutFrom: {
                     readonly min: 0;
                     readonly step: 1;
                     readonly hiddenFromList: false;
+                    readonly keyframable: false;
                 };
                 readonly postmountFor: {
                     readonly type: "number";
@@ -664,6 +675,7 @@ export declare const sequenceSchemaWithoutFrom: {
                     readonly min: 0;
                     readonly step: 1;
                     readonly hiddenFromList: true;
+                    readonly keyframable: false;
                 };
                 readonly styleWhilePremounted: {
                     readonly type: "hidden";

package/dist/cjs/interactivity-schema.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.sequenceSchemaDefaultLayoutNone = exports.sequenceSchemaWithoutFrom = exports.baseSchemaWithoutFrom = exports.sequenceSchema = exports.baseSchema = exports.freezeField = exports.trimBeforeField = exports.fromField = exports.durationInFramesField = exports.extendSchemaWithSequenceName = exports.sequenceNameField = exports.hiddenField = exports.sequenceStyleSchema = exports.sequencePremountSchema = exports.premountSchema = exports.textContentSchema = exports.textSchema = exports.sequenceVisualStyleSchema = exports.transformSchema = void 0;
+exports.sequenceSchemaDefaultLayoutNone = exports.sequenceSchemaWithoutFrom = exports.baseSchemaWithoutFrom = exports.sequenceSchema = exports.baseSchema = exports.freezeField = exports.trimBeforeField = exports.fromField = exports.durationInFramesField = exports.extendSchemaWithSequenceName = exports.sequenceNameField = exports.hiddenField = exports.sequenceStyleSchema = exports.sequencePremountSchema = exports.premountStyleSchema = exports.premountSchema = exports.textContentSchema = exports.textSchema = exports.sequenceVisualStyleSchema = exports.transformSchema = void 0;
 exports.transformSchema = {
     'style.transformOrigin': {
         type: 'transform-origin',
@@ -132,6 +132,7 @@ exports.premountSchema = {
         min: 0,
         step: 1,
         hiddenFromList: false,
+        keyframable: false,
     },
     postmountFor: {
         type: 'number',
@@ -139,7 +140,10 @@ exports.premountSchema = {
         min: 0,
         step: 1,
         hiddenFromList: true,
+        keyframable: false,
     },
+};
+exports.premountStyleSchema = {
     styleWhilePremounted: {
         type: 'hidden',
     },
@@ -147,10 +151,13 @@ exports.premountSchema = {
         type: 'hidden',
     },
 };
-exports.sequencePremountSchema = exports.premountSchema;
+exports.sequencePremountSchema = {
+    ...exports.premountSchema,
+    ...exports.premountStyleSchema,
+};
 exports.sequenceStyleSchema = {
     ...exports.transformSchema,
-    ...exports.premountSchema,
+    ...exports.sequencePremountSchema,
 };
 exports.hiddenField = {
     type: 'boolean',

package/dist/cjs/internals.d.ts

@@ -186,6 +186,7 @@ export declare const Internals: {
                         readonly min: 0;
                         readonly step: 1;
                         readonly hiddenFromList: false;
+                        readonly keyframable: false;
                     };
                     readonly postmountFor: {
                         readonly type: "number";
@@ -193,6 +194,7 @@ export declare const Internals: {
                         readonly min: 0;
                         readonly step: 1;
                         readonly hiddenFromList: true;
+                        readonly keyframable: false;
                     };
                     readonly styleWhilePremounted: {
                         readonly type: "hidden";
@@ -249,6 +251,7 @@ export declare const Internals: {
             readonly min: 0;
             readonly step: 1;
             readonly hiddenFromList: false;
+            readonly keyframable: false;
         };
         readonly postmountFor: {
             readonly type: "number";
@@ -256,6 +259,7 @@ export declare const Internals: {
             readonly min: 0;
             readonly step: 1;
             readonly hiddenFromList: true;
+            readonly keyframable: false;
         };
         readonly styleWhilePremounted: {
             readonly type: "hidden";
@@ -309,6 +313,7 @@ export declare const Internals: {
             readonly min: 0;
             readonly step: 1;
             readonly hiddenFromList: false;
+            readonly keyframable: false;
         };
         readonly postmountFor: {
             readonly type: "number";
@@ -316,6 +321,7 @@ export declare const Internals: {
             readonly min: 0;
             readonly step: 1;
             readonly hiddenFromList: true;
+            readonly keyframable: false;
         };
         readonly styleWhilePremounted: {
             readonly type: "hidden";
@@ -446,6 +452,7 @@ export declare const Internals: {
             readonly min: 0;
             readonly step: 1;
             readonly hiddenFromList: false;
+            readonly keyframable: false;
         };
         readonly postmountFor: {
             readonly type: "number";
@@ -453,7 +460,10 @@ export declare const Internals: {
             readonly min: 0;
             readonly step: 1;
             readonly hiddenFromList: true;
+            readonly keyframable: false;
         };
+    };
+    readonly premountStyleSchema: {
         readonly styleWhilePremounted: {
             readonly type: "hidden";
         };
@@ -512,6 +522,24 @@ export declare const Internals: {
     readonly truthy: typeof truthy;
     readonly SequenceContext: import("react").Context<import("./SequenceContext.js").SequenceContextType | null>;
     readonly PremountContext: import("react").Context<import("./PremountContext.js").PremountContextValue>;
+    readonly usePremounting: ({ from, durationInFrames, premountFor, postmountFor, style, styleWhilePremounted, styleWhilePostmounted, hideWhilePremounted, }: {
+        readonly from: number;
+        readonly durationInFrames: number;
+        readonly premountFor: number | null;
+        readonly postmountFor: number | null;
+        readonly style: import("react").CSSProperties | null;
+        readonly styleWhilePremounted: import("react").CSSProperties | null;
+        readonly styleWhilePostmounted: import("react").CSSProperties | null;
+        readonly hideWhilePremounted: "display-none" | "opacity";
+    }) => {
+        effectivePremountFor: number;
+        effectivePostmountFor: number;
+        premountingActive: boolean;
+        postmountingActive: boolean;
+        isPremountingOrPostmounting: boolean;
+        freezeFrame: number;
+        premountingStyle: import("react").CSSProperties | null;
+    };
     readonly useRemotionContexts: typeof useRemotionContexts;
     readonly RemotionContextProvider: (props: import("./wrap-remotion-context.js").RemotionContextProviderProps) => import("react/jsx-runtime").JSX.Element;
     readonly CSSUtils: typeof CSSUtils;
@@ -724,7 +752,35 @@ export declare const Internals: {
     readonly getComponentsToAddStacksTo: () => unknown[];
     readonly getSequenceComponent: () => unknown;
     readonly getSingleChildComponent: (children: import("react").ReactNode) => unknown;
-    readonly CurrentScaleContext: import("react").Context<import("./use-current-scale.js").CurrentScaleContextType | null>;
+    readonly CurrentScaleContext: import("react").Context<({
+        type: "scale";
+        scale: number;
+    } | ({
+        type: "canvas-size";
+        canvasSize: {
+            width: number;
+            height: number;
+            left: number;
+            top: number;
+            windowSize: {
+                width: number;
+                height: number;
+            };
+            refresh: () => void;
+        };
+    } & {
+        canvasSizeForAuto: {
+            width: number;
+            height: number;
+            left: number;
+            top: number;
+            windowSize: {
+                width: number;
+                height: number;
+            };
+            refresh: () => void;
+        };
+    })) | null>;
     readonly PixelDensityContext: import("react").Context<number | null>;
     readonly PreviewSizeContext: import("react").Context<import("./use-current-scale.js").PreviewSizeCtx>;
     readonly calculateScale: ({ canvasSize, compositionHeight, compositionWidth, previewSize, }: {

package/dist/cjs/internals.js

@@ -96,6 +96,7 @@ const use_lazy_component_js_1 = require("./use-lazy-component.js");
 const use_media_enabled_js_1 = require("./use-media-enabled.js");
 const use_media_in_timeline_js_1 = require("./use-media-in-timeline.js");
 const use_pixel_density_js_1 = require("./use-pixel-density.js");
+const use_premounting_js_1 = require("./use-premounting.js");
 const use_schema_js_1 = require("./use-schema.js");
 const use_unsafe_video_config_js_1 = require("./use-unsafe-video-config.js");
 const use_video_js_1 = require("./use-video.js");
@@ -149,6 +150,7 @@ exports.Internals = {
     textSchema: interactivity_schema_js_1.textSchema,
     transformSchema: interactivity_schema_js_1.transformSchema,
     premountSchema: interactivity_schema_js_1.premountSchema,
+    premountStyleSchema: interactivity_schema_js_1.premountStyleSchema,
     flattenActiveSchema: flatten_schema_js_1.flattenActiveSchema,
     getFlatSchemaWithAllKeys: flatten_schema_js_1.getFlatSchemaWithAllKeys,
     RemotionRootContexts: RemotionRoot_js_1.RemotionRootContexts,
@@ -162,6 +164,7 @@ exports.Internals = {
     truthy: truthy_js_1.truthy,
     SequenceContext: SequenceContext_js_1.SequenceContext,
     PremountContext: PremountContext_js_1.PremountContext,
+    usePremounting: use_premounting_js_1.usePremounting,
     useRemotionContexts: wrap_remotion_context_js_1.useRemotionContexts,
     RemotionContextProvider: wrap_remotion_context_js_1.RemotionContextProvider,
     CSSUtils,

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

@@ -139,6 +139,7 @@ export declare const NoReactInternals: {
                         readonly min: 0;
                         readonly step: 1;
                         readonly hiddenFromList: false;
+                        readonly keyframable: false;
                     };
                     readonly postmountFor: {
                         readonly type: "number";
@@ -146,6 +147,7 @@ export declare const NoReactInternals: {
                         readonly min: 0;
                         readonly step: 1;
                         readonly hiddenFromList: true;
+                        readonly keyframable: false;
                     };
                     readonly styleWhilePremounted: {
                         readonly type: "hidden";

package/dist/cjs/use-current-scale.d.ts

@@ -17,7 +17,14 @@ export type CurrentScaleContextType = {
     type: 'canvas-size';
     canvasSize: Size;
 };
-export declare const CurrentScaleContext: React.Context<CurrentScaleContextType | null>;
+type InternalCurrentScaleContextType = Extract<CurrentScaleContextType, {
+    type: 'scale';
+}> | (Extract<CurrentScaleContextType, {
+    type: 'canvas-size';
+}> & {
+    canvasSizeForAuto: Size;
+});
+export declare const CurrentScaleContext: React.Context<InternalCurrentScaleContextType | null>;
 type Options = {
     dontThrowIfOutsideOfRemotion: boolean;
 };

package/dist/cjs/use-current-scale.js

@@ -83,7 +83,7 @@ const useCurrentScale = (options) => {
         return hasContext.scale;
     }
     return (0, exports.calculateScale)({
-        canvasSize: hasContext.canvasSize,
+        canvasSize: hasContext.canvasSizeForAuto,
         compositionHeight: config.height,
         compositionWidth: config.width,
         previewSize: zoomContext.size.size,

package/dist/cjs/use-premounting.d.ts

@@ -0,0 +1,19 @@
+import type React from 'react';
+export declare const usePremounting: ({ from, durationInFrames, premountFor, postmountFor, style, styleWhilePremounted, styleWhilePostmounted, hideWhilePremounted, }: {
+    readonly from: number;
+    readonly durationInFrames: number;
+    readonly premountFor: number | null;
+    readonly postmountFor: number | null;
+    readonly style: React.CSSProperties | null;
+    readonly styleWhilePremounted: React.CSSProperties | null;
+    readonly styleWhilePostmounted: React.CSSProperties | null;
+    readonly hideWhilePremounted: "display-none" | "opacity";
+}) => {
+    effectivePremountFor: number;
+    effectivePostmountFor: number;
+    premountingActive: boolean;
+    postmountingActive: boolean;
+    isPremountingOrPostmounting: boolean;
+    freezeFrame: number;
+    premountingStyle: React.CSSProperties | null;
+};