remotion 4.0.428 → 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;
@@ -43,6 +44,11 @@ export type LoopDisplay = {
     startOffset: number;
     durationInFrames: number;
 };
+export type SequenceControls = {
+    schema: SequenceSchema;
+    currentValue: Record<string, unknown>;
+    overrideId: string;
+};
 export type TSequence = {
     from: number;
     duration: number;
@@ -56,6 +62,7 @@ export type TSequence = {
     stack: string | null;
     premountDisplay: number | null;
     postmountDisplay: number | null;
+    controls: SequenceControls | null;
 } & EnhancedTSequenceData;
 export type AudioOrVideoAsset = {
     type: 'audio' | 'video';

package/dist/cjs/Img.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Img = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const SequenceContext_js_1 = require("./SequenceContext.js");
 const cancel_render_js_1 = require("./cancel-render.js");
 const get_cross_origin_value_js_1 = require("./get-cross-origin-value.js");
 const prefetch_js_1 = require("./prefetch.js");
+const SequenceContext_js_1 = require("./SequenceContext.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");

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/RemotionRoot.js

@@ -3,14 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RemotionRootContexts = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const EditorProps_js_1 = require("./EditorProps.js");
-const SequenceManager_js_1 = require("./SequenceManager.js");
-const TimelineContext_js_1 = require("./TimelineContext.js");
 const shared_audio_tags_js_1 = require("./audio/shared-audio-tags.js");
 const buffering_js_1 = require("./buffering.js");
+const EditorProps_js_1 = require("./EditorProps.js");
 const log_level_context_js_1 = require("./log-level-context.js");
 const nonce_js_1 = require("./nonce.js");
 const prefetch_state_js_1 = require("./prefetch-state.js");
+const SequenceManager_js_1 = require("./SequenceManager.js");
+const TimelineContext_js_1 = require("./TimelineContext.js");
 const use_media_enabled_js_1 = require("./use-media-enabled.js");
 const duration_state_js_1 = require("./video/duration-state.js");
 const RemotionRootContexts = ({ children, numberOfAudioTags, logLevel, audioLatencyHint, videoEnabled, audioEnabled, frameState, nonceContextSeed, }) => {

package/dist/cjs/ResolveCompositionConfig.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useResolvedVideoConfig = exports.PROPS_UPDATED_EXTERNALLY = exports.needsResolution = exports.resolveCompositionsRef = exports.ResolveCompositionContext = void 0;
 const react_1 = require("react");
 const CompositionManagerContext_js_1 = require("./CompositionManagerContext.js");
-const EditorProps_js_1 = require("./EditorProps.js");
 const input_props_js_1 = require("./config/input-props.js");
+const EditorProps_js_1 = require("./EditorProps.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
 const validate_dimensions_js_1 = require("./validation/validate-dimensions.js");
 const validate_duration_in_frames_js_1 = require("./validation/validate-duration-in-frames.js");

package/dist/cjs/Sequence.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { LoopDisplay } from './CompositionManager.js';
+import type { LoopDisplay, SequenceControls } from './CompositionManager.js';
 export type AbsoluteFillLayout = {
     layout?: 'absolute-fill';
     premountFor?: number;
@@ -19,6 +19,7 @@ export type SequencePropsWithoutDuration = {
     readonly from?: number;
     readonly name?: string;
     readonly showInTimeline?: boolean;
+    readonly controls?: SequenceControls;
     /**
      * @deprecated For internal use only.
      */

package/dist/cjs/Sequence.js

@@ -5,17 +5,18 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable @typescript-eslint/no-use-before-define */
 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 TimelineContext_js_1 = require("./TimelineContext.js");
-const nonce_js_1 = require("./nonce.js");
 const timeline_position_state_js_1 = require("./timeline-position-state.js");
-const use_video_config_js_1 = require("./use-video-config.js");
-const freeze_js_1 = require("./freeze.js");
+const TimelineContext_js_1 = require("./TimelineContext.js");
 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 RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity, children, name, height, width, showInTimeline = true, _remotionInternalLoopDisplay: loopDisplay, _remotionInternalStack: stack, _remotionInternalPremountDisplay: premountDisplay, _remotionInternalPostmountDisplay: postmountDisplay, ...other }, ref) => {
+const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity, children, name, height, width, showInTimeline = true, controls, _remotionInternalLoopDisplay: loopDisplay, _remotionInternalStack: stack, _remotionInternalPremountDisplay: premountDisplay, _remotionInternalPostmountDisplay: postmountDisplay, ...other }, ref) => {
     var _a, _b;
     const { layout = 'absolute-fill' } = other;
     const [id] = (0, react_1.useState)(() => String(Math.random()));
@@ -114,6 +115,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
             stack: stack !== null && stack !== void 0 ? stack : inheritedStack,
             premountDisplay: premountDisplay !== null && premountDisplay !== void 0 ? premountDisplay : null,
             postmountDisplay: postmountDisplay !== null && postmountDisplay !== void 0 ? postmountDisplay : null,
+            controls: controls !== null && controls !== void 0 ? controls : null,
         });
         return () => {
             unregisterSequence(id);
@@ -137,6 +139,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
         postmountDisplay,
         env.isStudio,
         inheritedStack,
+        controls,
     ]);
     // Ceil to support floats
     // https://github.com/remotion-dev/remotion/issues/2958
@@ -199,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/SequenceManager.d.ts

@@ -11,6 +11,12 @@ export type SequenceVisibilityToggleState = {
     setHidden: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
 };
 export declare const SequenceVisibilityToggleContext: React.Context<SequenceVisibilityToggleState>;
+export type SequenceControlOverrideState = {
+    overrides: Record<string, Record<string, unknown>>;
+    setOverride: (sequenceId: string, key: string, value: unknown) => void;
+    clearOverrides: (sequenceId: string) => void;
+};
+export declare const SequenceControlOverrideContext: React.Context<SequenceControlOverrideState>;
 export declare const SequenceManagerProvider: React.FC<{
     readonly children: React.ReactNode;
 }>;

package/dist/cjs/SequenceManager.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SequenceManagerProvider = exports.SequenceVisibilityToggleContext = exports.SequenceManager = void 0;
+exports.SequenceManagerProvider = exports.SequenceControlOverrideContext = exports.SequenceVisibilityToggleContext = exports.SequenceManager = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 exports.SequenceManager = react_1.default.createContext({
@@ -51,9 +51,40 @@ exports.SequenceVisibilityToggleContext = react_1.default.createContext({
         throw new Error('SequenceVisibilityToggle not initialized');
     },
 });
+exports.SequenceControlOverrideContext = react_1.default.createContext({
+    overrides: {},
+    setOverride: () => {
+        throw new Error('SequenceControlOverrideContext not initialized');
+    },
+    clearOverrides: () => {
+        throw new Error('SequenceControlOverrideContext not initialized');
+    },
+});
 const SequenceManagerProvider = ({ children }) => {
     const [sequences, setSequences] = (0, react_1.useState)([]);
     const [hidden, setHidden] = (0, react_1.useState)({});
+    const [controlOverrides, setControlOverrides] = (0, react_1.useState)({});
+    const controlOverridesRef = (0, react_1.useRef)(controlOverrides);
+    controlOverridesRef.current = controlOverrides;
+    const setOverride = (0, react_1.useCallback)((sequenceId, key, value) => {
+        setControlOverrides((prev) => ({
+            ...prev,
+            [sequenceId]: {
+                ...prev[sequenceId],
+                [key]: value,
+            },
+        }));
+    }, []);
+    const clearOverrides = (0, react_1.useCallback)((sequenceId) => {
+        setControlOverrides((prev) => {
+            if (!prev[sequenceId]) {
+                return prev;
+            }
+            const next = { ...prev };
+            delete next[sequenceId];
+            return next;
+        });
+    }, []);
     const registerSequence = (0, react_1.useCallback)((seq) => {
         setSequences((seqs) => {
             return [...seqs, seq];
@@ -75,6 +106,13 @@ const SequenceManagerProvider = ({ children }) => {
             setHidden,
         };
     }, [hidden]);
-    return ((0, jsx_runtime_1.jsx)(exports.SequenceManager.Provider, { value: sequenceContext, children: (0, jsx_runtime_1.jsx)(exports.SequenceVisibilityToggleContext.Provider, { value: hiddenContext, children: children }) }));
+    const overrideContext = (0, react_1.useMemo)(() => {
+        return {
+            overrides: controlOverrides,
+            setOverride,
+            clearOverrides,
+        };
+    }, [controlOverrides, setOverride, clearOverrides]);
+    return ((0, jsx_runtime_1.jsx)(exports.SequenceManager.Provider, { value: sequenceContext, children: (0, jsx_runtime_1.jsx)(exports.SequenceVisibilityToggleContext.Provider, { value: hiddenContext, children: (0, jsx_runtime_1.jsx)(exports.SequenceControlOverrideContext.Provider, { value: overrideContext, children: children }) }) }));
 };
 exports.SequenceManagerProvider = SequenceManagerProvider;

package/dist/cjs/audio/Audio.js

@@ -4,13 +4,13 @@ exports.Audio = exports.Html5Audio = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable @typescript-eslint/no-use-before-define */
 const react_1 = require("react");
-const Sequence_js_1 = require("../Sequence.js");
 const absolute_src_js_1 = require("../absolute-src.js");
 const calculate_media_duration_js_1 = require("../calculate-media-duration.js");
 const cancel_render_js_1 = require("../cancel-render.js");
 const enable_sequence_stack_traces_js_1 = require("../enable-sequence-stack-traces.js");
 const index_js_1 = require("../loop/index.js");
 const prefetch_js_1 = require("../prefetch.js");
+const Sequence_js_1 = require("../Sequence.js");
 const use_remotion_environment_js_1 = require("../use-remotion-environment.js");
 const use_video_config_js_1 = require("../use-video-config.js");
 const validate_media_props_js_1 = require("../validate-media-props.js");

package/dist/cjs/audio/AudioForPreview.js

@@ -36,12 +36,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AudioForPreview = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
-const SequenceContext_js_1 = require("../SequenceContext.js");
-const SequenceManager_js_1 = require("../SequenceManager.js");
 const get_cross_origin_value_js_1 = require("../get-cross-origin-value.js");
 const log_level_context_js_1 = require("../log-level-context.js");
 const prefetch_js_1 = require("../prefetch.js");
 const random_js_1 = require("../random.js");
+const SequenceContext_js_1 = require("../SequenceContext.js");
+const SequenceManager_js_1 = require("../SequenceManager.js");
 const use_amplification_js_1 = require("../use-amplification.js");
 const use_media_in_timeline_js_1 = require("../use-media-in-timeline.js");
 const use_media_playback_js_1 = require("../use-media-playback.js");

package/dist/cjs/audio/AudioForRendering.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AudioForRendering = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const RenderAssetManager_js_1 = require("../RenderAssetManager.js");
-const SequenceContext_js_1 = require("../SequenceContext.js");
 const absolute_src_js_1 = require("../absolute-src.js");
 const random_js_1 = require("../random.js");
+const RenderAssetManager_js_1 = require("../RenderAssetManager.js");
+const SequenceContext_js_1 = require("../SequenceContext.js");
 const timeline_position_state_js_1 = require("../timeline-position-state.js");
 const use_current_frame_js_1 = require("../use-current-frame.js");
 const use_delay_render_js_1 = require("../use-delay-render.js");

package/dist/cjs/audio/use-audio-frame.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFrameForVolumeProp = exports.useMediaStartsAt = void 0;
 const react_1 = require("react");
-const SequenceContext_js_1 = require("../SequenceContext.js");
 const index_js_1 = require("../loop/index.js");
+const SequenceContext_js_1 = require("../SequenceContext.js");
 const use_current_frame_js_1 = require("../use-current-frame.js");
 const useMediaStartsAt = () => {
     var _a;

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

@@ -1,12 +1,13 @@
 import './_check-rsc.js';
 import './asset-types.js';
 import type { Codec } from './codec.js';
-import type { AnyCompMetadata, AnyComposition, AudioOrVideoAsset, LoopDisplay, TRenderAsset } from './CompositionManager.js';
+import type { AnyCompMetadata, AnyComposition, AudioOrVideoAsset, LoopDisplay, SequenceControls, TRenderAsset } from './CompositionManager.js';
 import type { DelayRenderScope } from './delay-render.js';
 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, 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';
@@ -70,8 +71,14 @@ export declare const Internals: {
     }, "ref"> & import("react").RefAttributes<HTMLVideoElement>>;
     readonly CompositionManager: import("react").Context<CompositionManagerContext>;
     readonly CompositionSetters: import("react").Context<import("./CompositionManagerContext.js").CompositionManagerSetters>;
+    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;
         readonly numberOfAudioTags: number;
@@ -118,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;
@@ -280,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, }: {
@@ -419,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,8 @@ 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");
 const validate_media_props_js_1 = require("./validate-media-props.js");
@@ -112,8 +115,11 @@ exports.Internals = {
     VideoForPreview: VideoForPreview_js_1.VideoForPreview,
     CompositionManager: CompositionManagerContext_js_1.CompositionManager,
     CompositionSetters: CompositionManagerContext_js_1.CompositionSetters,
+    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,
     useVideo: use_video_js_1.useVideo,
@@ -124,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,
@@ -166,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/series/index.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Series = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const Sequence_js_1 = require("../Sequence.js");
 const enable_sequence_stack_traces_js_1 = require("../enable-sequence-stack-traces.js");
+const Sequence_js_1 = require("../Sequence.js");
 const v5_flag_js_1 = require("../v5-flag.js");
 const validate_duration_in_frames_js_1 = require("../validation/validate-duration-in-frames.js");
 const flatten_children_js_1 = require("./flatten-children.js");

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-media-in-timeline.js

@@ -2,13 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMediaInTimeline = exports.useBasicMediaInTimeline = void 0;
 const react_1 = require("react");
-const SequenceContext_js_1 = require("./SequenceContext.js");
-const SequenceManager_js_1 = require("./SequenceManager.js");
-const TimelineContext_js_1 = require("./TimelineContext.js");
 const use_audio_frame_js_1 = require("./audio/use-audio-frame.js");
 const calculate_media_duration_js_1 = require("./calculate-media-duration.js");
 const get_asset_file_name_js_1 = require("./get-asset-file-name.js");
 const nonce_js_1 = require("./nonce.js");
+const SequenceContext_js_1 = require("./SequenceContext.js");
+const SequenceManager_js_1 = require("./SequenceManager.js");
+const TimelineContext_js_1 = require("./TimelineContext.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
 const use_video_config_js_1 = require("./use-video-config.js");
 const volume_prop_js_1 = require("./volume-prop.js");
@@ -117,6 +117,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, src, mediaType, playbackRate,
             stack,
             premountDisplay,
             postmountDisplay,
+            controls: null,
         });
         return () => {
             unregisterSequence(id);

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;
+};