remotion 4.0.429 → 4.0.430

package/dist/cjs/CompositionManager.d.ts

@@ -4,6 +4,7 @@ import type { AnyZodObject } from './any-zod-type.js';
 import type { CalculateMetadataFunction } from './Composition.js';
 import type { DownloadBehavior } from './download-behavior.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;
@@ -44,8 +45,9 @@ export type LoopDisplay = {
     durationInFrames: number;
 };
 export type SequenceControls = {
-    schema: AnyZodObject;
+    schema: SequenceSchema;
     currentValue: Record<string, unknown>;
+    overrideId: string;
 };
 export type TSequence = {
     from: number;

package/dist/cjs/PremountContext.d.ts

@@ -0,0 +1,11 @@
+export type PremountContextValue = {
+    premountFramesRemaining: number;
+    playing: boolean;
+};
+/**
+ * @internal
+ * Provides premounting state to internal components.
+ * - premountFramesRemaining: accumulated frames remaining until premounting ends (0 if not premounting).
+ * - playing: whether the player is currently playing. Sticky true: if any parent is playing, this is true.
+ */
+export declare const PremountContext: import("react").Context<PremountContextValue>;

package/dist/cjs/PremountContext.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PremountContext = void 0;
+const react_1 = require("react");
+/**
+ * @internal
+ * Provides premounting state to internal components.
+ * - premountFramesRemaining: accumulated frames remaining until premounting ends (0 if not premounting).
+ * - playing: whether the player is currently playing. Sticky true: if any parent is playing, this is true.
+ */
+exports.PremountContext = (0, react_1.createContext)({
+    premountFramesRemaining: 0,
+    playing: false,
+});

package/dist/cjs/Sequence.js

@@ -7,6 +7,7 @@ const react_1 = require("react");
 const AbsoluteFill_js_1 = require("./AbsoluteFill.js");
 const freeze_js_1 = require("./freeze.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 timeline_position_state_js_1 = require("./timeline-position-state.js");
@@ -201,7 +202,17 @@ const PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
         styleWhilePremounted,
         styleWhilePostmounted,
     ]);
-    return ((0, jsx_runtime_1.jsx)(freeze_js_1.Freeze, { frame: freezeFrame, active: isFreezingActive, children: (0, jsx_runtime_1.jsx)(exports.Sequence, { ref: ref, from: from, durationInFrames: durationInFrames, style: style, _remotionInternalPremountDisplay: premountFor, _remotionInternalPostmountDisplay: postmountFor, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, ...otherProps }) }));
+    const parentPremountContext = (0, react_1.useContext)(PremountContext_js_1.PremountContext);
+    const { playing } = (0, react_1.useContext)(TimelineContext_js_1.TimelineContext);
+    const premountFramesRemaining = parentPremountContext.premountFramesRemaining +
+        (premountingActive ? from - frame : 0);
+    const premountContextValue = (0, react_1.useMemo)(() => {
+        return {
+            premountFramesRemaining,
+            playing: parentPremountContext.playing || playing,
+        };
+    }, [premountFramesRemaining, parentPremountContext.playing, playing]);
+    return ((0, jsx_runtime_1.jsx)(PremountContext_js_1.PremountContext.Provider, { value: premountContextValue, children: (0, jsx_runtime_1.jsx)(freeze_js_1.Freeze, { frame: freezeFrame, active: isFreezingActive, children: (0, jsx_runtime_1.jsx)(exports.Sequence, { ref: ref, from: from, durationInFrames: durationInFrames, style: style, _remotionInternalPremountDisplay: premountFor, _remotionInternalPostmountDisplay: postmountFor, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, ...otherProps }) }) }));
 };
 const PremountedPostmountedSequence = (0, react_1.forwardRef)(PremountedPostmountedSequenceRefForwardingFunction);
 const SequenceRefForwardingFunction = (props, ref) => {

package/dist/cjs/enable-sequence-stack-traces.d.ts

@@ -1,2 +1,2 @@
-export declare const enableSequenceStackTraces: () => void;
+export declare const getComponentsToAddStacksTo: () => unknown[];
 export declare const addSequenceStackTraces: (component: unknown) => void;

package/dist/cjs/enable-sequence-stack-traces.js

@@ -1,44 +1,10 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.addSequenceStackTraces = exports.enableSequenceStackTraces = void 0;
-const react_1 = __importDefault(require("react"));
-const jsx_runtime_1 = __importDefault(require("react/jsx-runtime"));
-const get_remotion_environment_1 = require("./get-remotion-environment");
-const originalCreateElement = react_1.default.createElement;
-const originalJsx = jsx_runtime_1.default.jsx;
+exports.addSequenceStackTraces = exports.getComponentsToAddStacksTo = void 0;
 const componentsToAddStacksTo = [];
-const enableProxy = (api) => {
-    return new Proxy(api, {
-        apply(target, thisArg, argArray) {
-            if (componentsToAddStacksTo.includes(argArray[0])) {
-                const [first, props, ...rest] = argArray;
-                const newProps = props.stack
-                    ? props
-                    : {
-                        ...(props !== null && props !== void 0 ? props : {}),
-                        stack: new Error().stack,
-                    };
-                return Reflect.apply(target, thisArg, [first, newProps, ...rest]);
-            }
-            return Reflect.apply(target, thisArg, argArray);
-        },
-    });
-};
-// Gets called when a new component is added,
-// also when the Studio is mounted
-const enableSequenceStackTraces = () => {
-    if (!(0, get_remotion_environment_1.getRemotionEnvironment)().isStudio) {
-        return;
-    }
-    react_1.default.createElement = enableProxy(originalCreateElement);
-    jsx_runtime_1.default.jsx = enableProxy(originalJsx);
-};
-exports.enableSequenceStackTraces = enableSequenceStackTraces;
+const getComponentsToAddStacksTo = () => componentsToAddStacksTo;
+exports.getComponentsToAddStacksTo = getComponentsToAddStacksTo;
 const addSequenceStackTraces = (component) => {
     componentsToAddStacksTo.push(component);
-    (0, exports.enableSequenceStackTraces)();
 };
 exports.addSequenceStackTraces = addSequenceStackTraces;

package/dist/cjs/index.d.ts

@@ -7,6 +7,7 @@ import type { StaticFile } from './get-static-files.js';
 import type { LogLevel } from './log.js';
 import type { ProResProfile } from './prores-profile.js';
 import type { PixelFormat, VideoImageFormat } from './render-types.js';
+import type { SequenceFieldSchema, SequenceSchema } from './sequence-field-schema.js';
 import type { UseBufferState } from './use-buffer-state';
 import type { VideoConfig } from './video-config.js';
 export type VideoConfigWithSerializedProps = Omit<VideoConfig, 'defaultProps' | 'props'> & {
@@ -158,4 +159,4 @@ export type _InternalTypes = {
     TRenderAsset: TRenderAsset;
     ProResProfile: ProResProfile;
 };
-export type { AnyComposition, DelayRenderScope, LoopDisplay, SequenceControls, UseBufferState, };
+export type { AnyComposition, DelayRenderScope, LoopDisplay, SequenceControls, SequenceFieldSchema, SequenceSchema, UseBufferState, };

package/dist/cjs/index.js

@@ -128,4 +128,5 @@ exports.Config = new Proxy(proxyObj, {
         };
     },
 });
+Sequence_js_1.Sequence.displayName = 'Sequence';
 (0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(Sequence_js_1.Sequence);

package/dist/cjs/internals.d.ts

@@ -5,6 +5,7 @@ import * as CSSUtils from './default-css.js';
 import type { SerializedJSONWithCustomFields } from './input-props-serialization.js';
 import type { LoggingContextValue } from './log-level-context.js';
 import type { RemotionEnvironment } from './remotion-environment-context.js';
+import type { SequenceFieldSchema, SequenceSchema } from './sequence-field-schema.js';
 import * as TimelinePosition from './timeline-position-state.js';
 import { type SetTimelineContextValue, type TimelineContextValue } from './TimelineContext.js';
 import { truthy } from './truthy.js';
@@ -73,6 +74,10 @@ export declare const Internals: {
     readonly SequenceControlOverrideContext: import("react").Context<import("./SequenceManager.js").SequenceControlOverrideState>;
     readonly SequenceManager: import("react").Context<import("./SequenceManager.js").SequenceManagerContext>;
     readonly SequenceVisibilityToggleContext: import("react").Context<import("./SequenceManager.js").SequenceVisibilityToggleState>;
+    readonly useSchema: <T extends Record<string, unknown>>(schema: SequenceSchema | null, currentValue: T | null) => {
+        controls: import("./CompositionManager.js").SequenceControls | undefined;
+        values: T;
+    };
     readonly useSequenceControlOverride: (key: string) => unknown | undefined;
     readonly RemotionRootContexts: import("react").FC<{
         readonly children: React.ReactNode;
@@ -120,6 +125,7 @@ export declare const Internals: {
     }) | import("react").ComponentType<Props>;
     readonly truthy: typeof truthy;
     readonly SequenceContext: import("react").Context<import("./SequenceContext.js").SequenceContextType | null>;
+    readonly PremountContext: import("react").Context<import("./PremountContext.js").PremountContextValue>;
     readonly useRemotionContexts: typeof useRemotionContexts;
     readonly RemotionContextProvider: (props: import("./wrap-remotion-context.js").RemotionContextProviderProps) => import("react/jsx-runtime.js").JSX.Element;
     readonly CSSUtils: typeof CSSUtils;
@@ -282,7 +288,7 @@ export declare const Internals: {
         };
         buffering: React.MutableRefObject<boolean>;
     } | null>;
-    readonly enableSequenceStackTraces: () => void;
+    readonly getComponentsToAddStacksTo: () => unknown[];
     readonly CurrentScaleContext: import("react").Context<import("./use-current-scale.js").CurrentScaleContextType | null>;
     readonly PreviewSizeContext: import("react").Context<import("./use-current-scale.js").PreviewSizeCtx>;
     readonly calculateScale: ({ canvasSize, compositionHeight, compositionWidth, previewSize, }: {
@@ -421,4 +427,4 @@ export declare const Internals: {
         collectAssets: null | React.RefObject<import("./RenderAssetManager.js").CollectAssetsRef | null>;
     }>;
 };
-export type { CompositionManagerContext, CompProps, LoggingContextValue, MediaVolumeContextValue, RemotionEnvironment, SerializedJSONWithCustomFields, SetMediaVolumeContextValue, SetTimelineContextValue, TCompMetadata, TComposition, TimelineContextValue, TRenderAsset, TSequence, WatchRemotionStaticFilesPayload, };
+export type { CompositionManagerContext, CompProps, LoggingContextValue, MediaVolumeContextValue, RemotionEnvironment, SequenceFieldSchema, SequenceSchema, SerializedJSONWithCustomFields, SetMediaVolumeContextValue, SetTimelineContextValue, TCompMetadata, TComposition, TimelineContextValue, TRenderAsset, TSequence, WatchRemotionStaticFilesPayload, };

package/dist/cjs/internals.js

@@ -61,6 +61,7 @@ const playback_logging_js_1 = require("./playback-logging.js");
 const portal_node_js_1 = require("./portal-node.js");
 const prefetch_state_js_1 = require("./prefetch-state.js");
 const prefetch_js_1 = require("./prefetch.js");
+const PremountContext_js_1 = require("./PremountContext.js");
 const register_root_js_1 = require("./register-root.js");
 const remotion_environment_context_js_1 = require("./remotion-environment-context.js");
 const RemotionRoot_js_1 = require("./RemotionRoot.js");
@@ -79,6 +80,7 @@ const use_delay_render_js_1 = require("./use-delay-render.js");
 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_schema_js_1 = require("./use-schema.js");
 const use_sequence_control_override_js_1 = require("./use-sequence-control-override.js");
 const use_unsafe_video_config_js_1 = require("./use-unsafe-video-config.js");
 const use_video_js_1 = require("./use-video.js");
@@ -116,6 +118,7 @@ exports.Internals = {
     SequenceControlOverrideContext: SequenceManager_js_1.SequenceControlOverrideContext,
     SequenceManager: SequenceManager_js_1.SequenceManager,
     SequenceVisibilityToggleContext: SequenceManager_js_1.SequenceVisibilityToggleContext,
+    useSchema: use_schema_js_1.useSchema,
     useSequenceControlOverride: use_sequence_control_override_js_1.useSequenceControlOverride,
     RemotionRootContexts: RemotionRoot_js_1.RemotionRootContexts,
     CompositionManagerProvider: CompositionManagerProvider_js_1.CompositionManagerProvider,
@@ -127,6 +130,7 @@ exports.Internals = {
     useLazyComponent: use_lazy_component_js_1.useLazyComponent,
     truthy: truthy_js_1.truthy,
     SequenceContext: SequenceContext_js_1.SequenceContext,
+    PremountContext: PremountContext_js_1.PremountContext,
     useRemotionContexts: wrap_remotion_context_js_1.useRemotionContexts,
     RemotionContextProvider: wrap_remotion_context_js_1.RemotionContextProvider,
     CSSUtils,
@@ -169,7 +173,7 @@ exports.Internals = {
     useMediaStartsAt: use_audio_frame_js_1.useMediaStartsAt,
     BufferingProvider: buffering_js_1.BufferingProvider,
     BufferingContextReact: buffering_js_1.BufferingContextReact,
-    enableSequenceStackTraces: enable_sequence_stack_traces_js_1.enableSequenceStackTraces,
+    getComponentsToAddStacksTo: enable_sequence_stack_traces_js_1.getComponentsToAddStacksTo,
     CurrentScaleContext: use_current_scale_js_1.CurrentScaleContext,
     PreviewSizeContext: use_current_scale_js_1.PreviewSizeContext,
     calculateScale: use_current_scale_js_1.calculateScale,

package/dist/cjs/sequence-field-schema.d.ts

@@ -0,0 +1,15 @@
+export type NumberFieldSchema = {
+    type: 'number';
+    min?: number;
+    max?: number;
+    step?: number;
+    default?: number;
+    description?: string;
+};
+export type BooleanFieldSchema = {
+    type: 'boolean';
+    default?: boolean;
+    description?: string;
+};
+export type SequenceFieldSchema = NumberFieldSchema | BooleanFieldSchema;
+export type SequenceSchema = Record<string, SequenceFieldSchema>;

package/dist/cjs/sequence-field-schema.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/sequence-stack-traces.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export type ResolvedStackLocation = {
+    line: number | null;
+    column: number | null;
+    source: string | null;
+};
+export type SequenceStackTracesContextType = {
+    resolvedStacks: Record<string, ResolvedStackLocation | null>;
+};
+export declare const SequenceStackTracesContext: React.Context<SequenceStackTracesContextType>;
+export type UpdateResolvedStackTraceFn = (stack: string, location: ResolvedStackLocation | null) => void;
+export declare const SequenceStackTracesUpdateContext: React.Context<UpdateResolvedStackTraceFn>;

package/dist/cjs/sequence-stack-traces.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SequenceStackTracesUpdateContext = exports.SequenceStackTracesContext = void 0;
+const react_1 = __importDefault(require("react"));
+exports.SequenceStackTracesContext = react_1.default.createContext({
+    resolvedStacks: {},
+});
+exports.SequenceStackTracesUpdateContext = react_1.default.createContext(() => { });

package/dist/cjs/use-lazy-component.js

@@ -37,6 +37,27 @@ exports.useLazyComponent = void 0;
 const react_1 = __importStar(require("react"));
 // Expected, it can be any component props
 const useLazyComponent = ({ compProps, componentName, noSuspense, }) => {
+    // Why a ref + stable wrapper instead of returning compProps.component directly?
+    //
+    // When a user edits their component and saves, React Fast Refresh re-executes
+    // the module, giving compProps.component a new function reference.
+    // Previously, this new reference flowed into useMemo (which depended on
+    // compProps.component), producing a new `lazy` value. Composition.tsx then
+    // rendered `<Comp />` where Comp had a different identity, so React unmounted
+    // the old tree and mounted a fresh one — losing all component state.
+    //
+    // To fix this, we store the latest component in a ref (updated every render)
+    // and return a stable Wrapper from useMemo (created once). React sees the same
+    // Wrapper component across Fast Refresh updates, preserves the tree and state,
+    // while the ref ensures the Wrapper always delegates to the latest code.
+    //
+    // To reproduce: use packages/example/src/NewVideo.tsx, edit Component
+    // (e.g. change volume={1} to volume={2}) and save. Without this fix,
+    // Component would fully remount instead of fast-refreshing in place.
+    const componentRef = (0, react_1.useRef)(null);
+    if ('component' in compProps) {
+        componentRef.current = compProps.component;
+    }
     const lazy = (0, react_1.useMemo)(() => {
         if ('component' in compProps) {
             // In SSR, suspense is not yet supported, we cannot use React.lazy
@@ -46,7 +67,11 @@ const useLazyComponent = ({ compProps, componentName, noSuspense, }) => {
             if (typeof compProps.component === 'undefined') {
                 throw new Error(`A value of \`undefined\` was passed to the \`component\` prop. Check the value you are passing to the <${componentName}/> component.`);
             }
-            return compProps.component;
+            const Wrapper = (props) => {
+                const Comp = componentRef.current;
+                return react_1.default.createElement(Comp, props);
+            };
+            return Wrapper;
         }
         if ('lazyComponent' in compProps &&
             typeof compProps.lazyComponent !== 'undefined') {
@@ -58,9 +83,11 @@ const useLazyComponent = ({ compProps, componentName, noSuspense, }) => {
         throw new Error("You must pass either 'component' or 'lazyComponent'");
         // Very important to leave the dependencies as they are, or instead
         // the player will remount on every frame.
+        // For the 'component' case, we intentionally do NOT depend on
+        // compProps.component — the stable wrapper reads from componentRef instead.
         // @ts-expect-error
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [compProps.component, compProps.lazyComponent]);
+    }, [compProps.lazyComponent]);
     return lazy;
 };
 exports.useLazyComponent = useLazyComponent;

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

@@ -0,0 +1,6 @@
+import type { SequenceControls } from './CompositionManager.js';
+import type { SequenceSchema } from './sequence-field-schema.js';
+export declare const useSchema: <T extends Record<string, unknown>>(schema: SequenceSchema | null, currentValue: T | null) => {
+    controls: SequenceControls | undefined;
+    values: T;
+};

package/dist/cjs/use-schema.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSchema = void 0;
+/* eslint-disable react-hooks/rules-of-hooks */
+const react_1 = require("react");
+const SequenceManager_js_1 = require("./SequenceManager.js");
+const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
+const useSchema = (schema, currentValue) => {
+    const env = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
+    const earlyReturn = (0, react_1.useMemo)(() => {
+        if (!env.isStudio || env.isReadOnlyStudio) {
+            return {
+                controls: undefined,
+                values: (currentValue !== null && currentValue !== void 0 ? currentValue : {}),
+            };
+        }
+        return undefined;
+    }, [env.isStudio, env.isReadOnlyStudio, currentValue]);
+    if (earlyReturn) {
+        return earlyReturn;
+    }
+    // Intentional conditional hook call, useRemotionEnvironment is stable.
+    const [overrideId] = (0, react_1.useState)(() => String(Math.random()));
+    const { overrides } = (0, react_1.useContext)(SequenceManager_js_1.SequenceControlOverrideContext);
+    return (0, react_1.useMemo)(() => {
+        var _a;
+        if (schema === null || currentValue === null) {
+            return {
+                controls: undefined,
+                values: (currentValue !== null && currentValue !== void 0 ? currentValue : {}),
+            };
+        }
+        const overrideValues = (_a = overrides[overrideId]) !== null && _a !== void 0 ? _a : {};
+        const merged = { ...currentValue };
+        for (const key of Object.keys(overrideValues)) {
+            if (key in merged) {
+                merged[key] = overrideValues[key];
+            }
+        }
+        return {
+            controls: {
+                schema,
+                currentValue,
+                overrideId,
+            },
+            values: merged,
+        };
+    }, [schema, currentValue, overrides, overrideId]);
+};
+exports.useSchema = useSchema;

package/dist/cjs/version.d.ts

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

package/dist/cjs/version.js

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