remotion 4.0.534 → 4.0.535

package/dist/cjs/optimistic-sequence-deletion.js

@@ -0,0 +1,114 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OptimisticSequenceDeletion = exports.usePendingSequenceDeletions = void 0;
+const react_1 = require("react");
+const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
+const use_sync_external_store_js_1 = require("./use-sync-external-store.js");
+const deletions = new Map();
+const stackToNode = new Map();
+const listeners = new Set();
+const empty = new Set();
+let snapshot = empty;
+const keyForNode = (node) => JSON.stringify([node.absolutePath, node.nodePath]);
+const publish = (force = false) => {
+    const next = new Set([...deletions].filter(([, value]) => value.deleted).map(([key]) => key));
+    if (!force &&
+        next.size === snapshot.size &&
+        [...next].every((key) => snapshot.has(key))) {
+        return;
+    }
+    snapshot = next.size === 0 ? empty : next;
+    for (const listener of listeners) {
+        listener();
+    }
+};
+const subscribe = (listener) => {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+};
+const usePendingSequenceDeletions = () => {
+    const environment = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
+    const value = (0, use_sync_external_store_js_1.useSyncExternalStore)(subscribe, () => snapshot, () => empty);
+    return environment.isStudio && !environment.isRendering ? value : empty;
+};
+exports.usePendingSequenceDeletions = usePendingSequenceDeletions;
+exports.OptimisticSequenceDeletion = {
+    register: (stack, node) => {
+        if (stack === null || node === null) {
+            return;
+        }
+        const key = keyForNode(node);
+        if (stackToNode.get(stack) === key) {
+            return;
+        }
+        stackToNode.set(stack, key);
+        if (snapshot.size > 0) {
+            publish(true);
+        }
+    },
+    isDeleted: (node, pending) => node !== null && pending.has(keyForNode(node)),
+    isElementDeleted: (element, pending) => {
+        if (!(0, react_1.isValidElement)(element)) {
+            return false;
+        }
+        const stack = element.props._remotionInternalStack;
+        const key = stack === undefined ? undefined : stackToNode.get(stack);
+        return key !== undefined && pending.has(key);
+    },
+    set: (nodes, revision, deleted) => {
+        for (const node of nodes) {
+            const key = keyForNode(node);
+            const previous = deletions.get(key);
+            if (previous && previous.revision > revision) {
+                continue;
+            }
+            deletions.set(key, { id: revision, revision, deleted });
+        }
+        publish();
+    },
+    rollback: (nodes, revision) => {
+        var _a;
+        for (const node of nodes) {
+            const key = keyForNode(node);
+            if (((_a = deletions.get(key)) === null || _a === void 0 ? void 0 : _a.revision) === revision) {
+                deletions.delete(key);
+            }
+        }
+        publish();
+    },
+    // Undo/redo can only update deletions still represented by the loaded tree.
+    // Once source remapping retires them, restoration is handled by HMR.
+    restore: (nodes, revision, deleted) => {
+        for (const node of nodes) {
+            const key = keyForNode(node);
+            const previous = deletions.get(key);
+            if (previous && previous.revision <= revision) {
+                deletions.set(key, { ...previous, revision, deleted });
+            }
+        }
+        publish();
+    },
+    prepareRetirement: (nodes, dispatchedRevision) => {
+        const captured = nodes.map((node) => {
+            var _a;
+            const key = keyForNode(node);
+            return { key, id: (_a = deletions.get(key)) === null || _a === void 0 ? void 0 : _a.id };
+        });
+        return () => {
+            var _a;
+            let changed = false;
+            for (const { key, id } of captured) {
+                if (id !== undefined &&
+                    id <= dispatchedRevision &&
+                    ((_a = deletions.get(key)) === null || _a === void 0 ? void 0 : _a.id) === id) {
+                    changed = deletions.delete(key) || changed;
+                }
+            }
+            if (changed) {
+                publish();
+            }
+        };
+    },
+};

package/dist/cjs/registry-store.d.ts

@@ -0,0 +1,17 @@
+export type RegistryStore<TSnapshot> = {
+    readonly getSnapshot: () => TSnapshot;
+    readonly subscribe: (listener: () => void) => () => void;
+    readonly setSnapshot: (update: (previous: TSnapshot) => TSnapshot) => void;
+};
+export declare const areRegistryEntriesEqual: <T extends object>(previous: T, next: T) => boolean;
+export declare const reconcileRegistryEntries: <T extends object>({ current, entries, previousDescriptors, previousKeys, nextKeys, getKey, order, orderProperty, }: {
+    readonly current: T[];
+    readonly entries: readonly T[];
+    readonly previousDescriptors: ReadonlyMap<string, unknown>;
+    readonly previousKeys: ReadonlySet<string>;
+    readonly nextKeys: ReadonlySet<string>;
+    readonly getKey: (entry: T) => string;
+    readonly order: ReadonlyMap<string, number>;
+    readonly orderProperty: keyof T;
+}) => T[];
+export declare const createRegistryStore: <TSnapshot>(initialSnapshot: TSnapshot) => RegistryStore<TSnapshot>;

package/dist/cjs/registry-store.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createRegistryStore = exports.reconcileRegistryEntries = exports.areRegistryEntriesEqual = void 0;
+const areRegistryEntriesEqual = (previous, next) => {
+    const keys = Object.keys(previous);
+    return (keys.length === Object.keys(next).length &&
+        keys.every((key) => Object.prototype.hasOwnProperty.call(next, key) &&
+            Object.is(Reflect.get(previous, key), Reflect.get(next, key))));
+};
+exports.areRegistryEntriesEqual = areRegistryEntriesEqual;
+const reconcileRegistryEntries = ({ current, entries, previousDescriptors, previousKeys, nextKeys, getKey, order, orderProperty, }) => {
+    var _a;
+    const previousByKey = new Map(current.map((entry) => [getKey(entry), entry]));
+    const next = entries.map((entry) => {
+        var _a;
+        const key = getKey(entry);
+        const previous = previousByKey.get(key);
+        const nextOrder = (_a = order.get(key)) !== null && _a !== void 0 ? _a : null;
+        if (previous &&
+            previousDescriptors.get(key) === entry &&
+            previous[orderProperty] === nextOrder) {
+            return previous;
+        }
+        const registered = { ...entry, [orderProperty]: nextOrder };
+        return previous && (0, exports.areRegistryEntriesEqual)(previous, registered)
+            ? previous
+            : registered;
+    });
+    // Preserve imperative registrations, including their committed order.
+    for (const entry of current) {
+        const key = getKey(entry);
+        if (!previousKeys.has(key) && !nextKeys.has(key)) {
+            const nextOrder = (_a = order.get(key)) !== null && _a !== void 0 ? _a : entry[orderProperty];
+            next.push(entry[orderProperty] === nextOrder
+                ? entry
+                : { ...entry, [orderProperty]: nextOrder });
+        }
+    }
+    return next.length === current.length &&
+        next.every((entry, index) => entry === current[index])
+        ? current
+        : next;
+};
+exports.reconcileRegistryEntries = reconcileRegistryEntries;
+const createRegistryStore = (initialSnapshot) => {
+    let snapshot = initialSnapshot;
+    const listeners = new Set();
+    return {
+        getSnapshot: () => snapshot,
+        subscribe: (listener) => {
+            listeners.add(listener);
+            return () => {
+                listeners.delete(listener);
+            };
+        },
+        setSnapshot: (update) => {
+            const next = update(snapshot);
+            if (next === snapshot) {
+                return;
+            }
+            snapshot = next;
+            for (const listener of [...listeners]) {
+                listener();
+            }
+        },
+    };
+};
+exports.createRegistryStore = createRegistryStore;

package/dist/cjs/sequence-activity-context.d.ts

@@ -0,0 +1,13 @@
+import type { TimelineContextValue } from './TimelineContext.js';
+export { DEFAULT_SEQUENCE_ACTIVITY_LIMIT } from './sequence-activity-defaults.js';
+export declare const SequenceActivityContext: import("react").Context<boolean>;
+export declare const SequenceActivityDormantContext: import("react").Context<boolean>;
+export declare const SequenceActivitySettingsContext: import("react").Context<{
+    readonly enabled: boolean;
+    readonly limit: number;
+} | null>;
+export declare const SequenceActivityTimelineContext: import("react").Context<TimelineContextValue | null>;
+export declare const SequenceActivityAbsoluteTimeContext: import("react").Context<TimelineContextValue | null>;
+export declare const SequenceContent: React.FC<{
+    readonly children: React.ReactNode;
+}>;

package/dist/cjs/sequence-activity-context.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SequenceContent = exports.SequenceActivityAbsoluteTimeContext = exports.SequenceActivityTimelineContext = exports.SequenceActivitySettingsContext = exports.SequenceActivityDormantContext = exports.SequenceActivityContext = exports.DEFAULT_SEQUENCE_ACTIVITY_LIMIT = void 0;
+const react_1 = require("react");
+const sequence_activity_defaults_js_1 = require("./sequence-activity-defaults.js");
+Object.defineProperty(exports, "DEFAULT_SEQUENCE_ACTIVITY_LIMIT", { enumerable: true, get: function () { return sequence_activity_defaults_js_1.DEFAULT_SEQUENCE_ACTIVITY_LIMIT; } });
+// Internal Studio experiment. Hidden Activity trees register on commit, so the
+// experiment is disabled when the sequence manager falls back to effects.
+exports.SequenceActivityContext = (0, react_1.createContext)(false);
+exports.SequenceActivityDormantContext = (0, react_1.createContext)(false);
+exports.SequenceActivitySettingsContext = (0, react_1.createContext)(null);
+// React propagates changed ancestor contexts through hidden Activity trees,
+// even when a nested provider keeps their value stable. Use separate context
+// identities so dormant clocks do not subscribe to the advancing timeline.
+exports.SequenceActivityTimelineContext = (0, react_1.createContext)(null);
+exports.SequenceActivityAbsoluteTimeContext = (0, react_1.createContext)(null);
+const SequenceContent = ({ children }) => {
+    return (0, react_1.useContext)(exports.SequenceActivityDormantContext) ? null : children;
+};
+exports.SequenceContent = SequenceContent;

package/dist/cjs/sequence-activity-defaults.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_SEQUENCE_ACTIVITY_LIMIT = 20;

package/dist/cjs/sequence-activity-defaults.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_SEQUENCE_ACTIVITY_LIMIT = void 0;
+exports.DEFAULT_SEQUENCE_ACTIVITY_LIMIT = 20;

package/dist/cjs/sequence-outline.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SequenceOutlineInternals = exports.SequenceOutlineContext = void 0;
 const react_1 = __importDefault(require("react"));
 exports.SequenceOutlineContext = react_1.default.createContext(false);
-// Keep automatic groups separate from the public, single-element outlineRef.
 // A group only exposes .current when it has exactly one element, so consumers
 // that require an actual element never accidentally act on part of a group.
 const nodesByRef = new WeakMap();
@@ -26,10 +25,10 @@ exports.SequenceOutlineInternals = {
             previous.every((node, index) => node === nodes[index])) {
             return;
         }
-        nodesByRef.set(ref, nodes);
         ref.current =
             nodes.length === 1 && nodes[0].nodeType === 1
                 ? nodes[0]
                 : null;
+        nodesByRef.set(ref, nodes);
     },
 };

package/dist/cjs/sequence-registry-context.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { TSequence } from './CompositionManager.js';
+import type { RegistryStore } from './registry-store.js';
+export type SequenceManagerActions = {
+    registerSequence: (seq: TSequence) => void;
+    updateSequence: (seq: TSequence) => void;
+    unregisterSequence: (id: string) => void;
+};
+export type SequenceManagerRef = {
+    current: TSequence[];
+};
+export type SequenceNodePath = Array<string | number>;
+export declare const SequenceManagerActionsContext: React.Context<SequenceManagerActions>;
+export declare const SequenceRegistryContext: React.Context<RegistryStore<TSequence[]> | null>;
+export declare const SequenceCommitRegistrationContext: React.Context<boolean>;
+export declare const SequenceRegistryScopeContext: React.Context<{
+    readonly commitRegistrationRequested: boolean;
+    readonly onCommitSequences: (scopeId: string, sequences: readonly TSequence[], sequenceIds: readonly string[]) => void;
+} | null>;
+export declare const useSequenceManagerSequences: () => TSequence[];
+export declare const SequenceManagerRefContext: React.Context<SequenceManagerRef>;
+export declare const SequenceRegistrationContext: React.Context<boolean>;
+export declare const DisableSequenceRegistrationContext: React.Context<boolean>;
+export declare const DisableSequenceRegistrationProvider: React.FC<{
+    readonly children: React.ReactNode;
+}>;

package/dist/cjs/sequence-registry-context.js

@@ -0,0 +1,71 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DisableSequenceRegistrationProvider = exports.DisableSequenceRegistrationContext = exports.SequenceRegistrationContext = exports.SequenceManagerRefContext = exports.useSequenceManagerSequences = exports.SequenceRegistryScopeContext = exports.SequenceCommitRegistrationContext = exports.SequenceRegistryContext = exports.SequenceManagerActionsContext = void 0;
+const react_1 = __importStar(require("react"));
+const use_sync_external_store_js_1 = require("./use-sync-external-store.js");
+const defaultSequenceManagerActions = {
+    registerSequence: () => {
+        throw new Error('SequenceManagerActionsContext not initialized');
+    },
+    updateSequence: () => {
+        throw new Error('SequenceManagerActionsContext not initialized');
+    },
+    unregisterSequence: () => {
+        throw new Error('SequenceManagerActionsContext not initialized');
+    },
+};
+exports.SequenceManagerActionsContext = react_1.default.createContext(defaultSequenceManagerActions);
+exports.SequenceRegistryContext = react_1.default.createContext(null);
+const subscribeToNoRegistry = () => () => undefined;
+const emptySequences = [];
+const getEmptySequences = () => emptySequences;
+exports.SequenceCommitRegistrationContext = react_1.default.createContext(false);
+exports.SequenceRegistryScopeContext = react_1.default.createContext(null);
+const useSequenceManagerSequences = () => {
+    var _a, _b, _c;
+    const registry = (0, react_1.useContext)(exports.SequenceRegistryContext);
+    return (0, use_sync_external_store_js_1.useSyncExternalStore)((_a = registry === null || registry === void 0 ? void 0 : registry.subscribe) !== null && _a !== void 0 ? _a : subscribeToNoRegistry, (_b = registry === null || registry === void 0 ? void 0 : registry.getSnapshot) !== null && _b !== void 0 ? _b : getEmptySequences, (_c = registry === null || registry === void 0 ? void 0 : registry.getSnapshot) !== null && _c !== void 0 ? _c : getEmptySequences);
+};
+exports.useSequenceManagerSequences = useSequenceManagerSequences;
+exports.SequenceManagerRefContext = react_1.default.createContext({
+    current: [],
+});
+exports.SequenceRegistrationContext = react_1.default.createContext(false);
+exports.DisableSequenceRegistrationContext = react_1.default.createContext(false);
+const DisableSequenceRegistrationProvider = ({ children }) => {
+    return react_1.default.createElement(exports.DisableSequenceRegistrationContext.Provider, { value: true }, children);
+};
+exports.DisableSequenceRegistrationProvider = DisableSequenceRegistrationProvider;

package/dist/cjs/series/index.d.ts

@@ -1,12 +1,13 @@
 import React, { type PropsWithChildren } from 'react';
 import type { LayoutAndStyle, SequenceProps } from '../Sequence.js';
+import { type TrackWithoutSchemaProps } from '../Track.js';
 type SeriesSequenceProps = PropsWithChildren<{
     readonly durationInFrames: number;
     readonly offset?: number;
     readonly className?: string;
 } & Pick<SequenceProps, 'layout' | 'name' | 'hidden' | 'showInTimeline' | 'freeze' | 'trimBefore' | 'playbackRate'> & LayoutAndStyle>;
 declare const SeriesSequence: React.ForwardRefExoticComponent<SeriesSequenceProps & React.RefAttributes<HTMLDivElement>>;
-type SeriesProps = SequenceProps;
+type SeriesProps = TrackWithoutSchemaProps;
 /**
  * @description with this component, you can easily stitch together scenes that should play sequentially after another.
  * @see [Documentation](https://www.remotion.dev/docs/series)

package/dist/cjs/series/index.js

@@ -39,6 +39,7 @@ const react_1 = __importStar(require("react"));
 const enable_sequence_stack_traces_js_1 = require("../enable-sequence-stack-traces.js");
 const Interactive_js_1 = require("../Interactive.js");
 const interactivity_schema_js_1 = require("../interactivity-schema.js");
+const optimistic_sequence_deletion_js_1 = require("../optimistic-sequence-deletion.js");
 const Sequence_js_1 = require("../Sequence.js");
 const Track_js_1 = require("../Track.js");
 const validate_duration_in_frames_js_1 = require("../validation/validate-duration-in-frames.js");
@@ -92,8 +93,9 @@ const validateSeriesSequenceProps = ({ durationInFrames, offset: offsetProp, ind
 };
 const SeriesInner = (props) => {
     var _a;
+    const pendingDeletions = (0, optimistic_sequence_deletion_js_1.usePendingSequenceDeletions)();
     const childrenValue = (0, react_1.useMemo)(() => {
-        const flattenedChildren = (0, flatten_children_js_1.flattenChildren)(props.children);
+        const flattenedChildren = (0, flatten_children_js_1.flattenChildren)(props.children).filter((child) => !optimistic_sequence_deletion_js_1.OptimisticSequenceDeletion.isElementDeleted(child, pendingDeletions));
         const renderChildren = (i, startFrame) => {
             if (i === flattenedChildren.length) {
                 return null;
@@ -135,12 +137,15 @@ const SeriesInner = (props) => {
                     const currentStartFrame = startFrame + offset;
                     const nextStartFrame = startFrame + timelineDurationInFrames + offset;
                     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-                            jsx_runtime_1.jsx(SequenceWithoutSchemaWithRef, { ref: ref, name: name || '<Series.Sequence>', _remotionInternalDocumentationLink: name ? undefined : 'https://www.remotion.dev/docs/series', controls: controls !== null && controls !== void 0 ? controls : undefined, from: currentStartFrame, durationInFrames: durationInFramesProp, ...passedProps, _remotionInternalSingleChildComponent: (0, enable_sequence_stack_traces_js_1.getSingleChildComponent)(sequenceChildren), children: jsx_runtime_1.jsx(is_inside_series_js_1.IsNotInsideSeriesProvider, { children: sequenceChildren }) }), renderChildren(i + 1, nextStartFrame)] }));
+                            jsx_runtime_1.jsx(SequenceWithoutSchemaWithRef, { ref: ref, name: name || '<Series.Sequence>', _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/series", controls: controls !== null && controls !== void 0 ? controls : undefined, from: currentStartFrame, durationInFrames: durationInFramesProp, ...passedProps, _remotionInternalTimelineTrack: {
+                                    role: 'clip',
+                                    seriesOffset: offset,
+                                }, children: jsx_runtime_1.jsx(is_inside_series_js_1.IsNotInsideSeriesProvider, { children: sequenceChildren }) }), renderChildren(i + 1, nextStartFrame)] }));
                 },
             });
         };
         return renderChildren(0, 0);
-    }, [props.children]);
+    }, [props.children, pendingDeletions]);
     return (jsx_runtime_1.jsx(Track_js_1.TrackWithoutSchema, { layout: "none", _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/series", ...props, name: (_a = props.name) !== null && _a !== void 0 ? _a : '<Series>', children: jsx_runtime_1.jsx(is_inside_series_js_1.IsInsideSeriesContainer, { children: childrenValue }) }));
 };
 /**
@@ -151,7 +156,10 @@ const Series = Object.assign((0, with_interactivity_schema_js_1.withInteractivit
     Component: SeriesInner,
     componentName: '<Series>',
     componentIdentity: 'dev.remotion.remotion.Series',
-    schema: interactivity_schema_js_1.sequenceSchemaDefaultLayoutNone,
+    schema: {
+        ...interactivity_schema_js_1.sequenceSchemaDefaultLayoutNone,
+        ...interactivity_schema_js_1.sequenceTimingSchema,
+    },
     supportsEffects: false,
 }), {
     Sequence: SeriesSequence,

package/dist/cjs/timeline-position-state.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useBuffering = exports.usePlaying = exports.useTimelineSeekFrame = exports.useTimelineSetFrameWithoutSeek = exports.useAbsoluteTimelinePosition = exports.useIsInsideFreeze = exports.useTimelinePosition = exports.usePlaybackRate = exports.useTimelineContext = exports.clampFrameToCompositionRange = exports.getFrameForComposition = exports.getInitialFrameState = exports.persistCurrentFrame = void 0;
 const react_1 = require("react");
+const sequence_activity_context_js_1 = require("./sequence-activity-context.js");
 const TimelineContext_js_1 = require("./TimelineContext.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
 const use_video_js_1 = require("./use-video.js");
@@ -40,16 +41,22 @@ const useTimelinePositionFromContext = (state) => {
     var _a, _b;
     const videoConfig = (0, use_video_js_1.useVideo)();
     const env = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
+    const dormant = (0, react_1.useContext)(sequence_activity_context_js_1.SequenceActivityDormantContext);
     if (!videoConfig) {
         return typeof window === 'undefined'
             ? 0
             : ((_a = window.remotion_initialFrame) !== null && _a !== void 0 ? _a : 0);
     }
     const unclamped = (_b = state.frame[videoConfig.id]) !== null && _b !== void 0 ? _b : (env.isPlayer ? 0 : (0, exports.getFrameForComposition)(videoConfig.id));
-    return (0, exports.clampFrameToCompositionRange)(unclamped, videoConfig.durationInFrames);
+    // A discovery clock can be beyond the composition end, for example when a
+    // nested scene is trimmed by its parent. Keep its initial local frame intact.
+    return dormant
+        ? unclamped
+        : (0, exports.clampFrameToCompositionRange)(unclamped, videoConfig.durationInFrames);
 };
 const useTimelineContext = () => {
-    const state = (0, react_1.useContext)(TimelineContext_js_1.TimelineContext);
+    const dormant = (0, react_1.useContext)(sequence_activity_context_js_1.SequenceActivityDormantContext);
+    const state = (0, react_1.useContext)(dormant ? sequence_activity_context_js_1.SequenceActivityTimelineContext : TimelineContext_js_1.TimelineContext);
     if (state === null) {
         throw new Error('TimelineContext is not available. This hook must be used inside a <Player> or the Remotion Studio.');
     }
@@ -74,7 +81,8 @@ const useIsInsideFreeze = () => {
 };
 exports.useIsInsideFreeze = useIsInsideFreeze;
 const useAbsoluteTimelinePosition = () => {
-    const state = (0, react_1.useContext)(TimelineContext_js_1.AbsoluteTimeContext);
+    const dormant = (0, react_1.useContext)(sequence_activity_context_js_1.SequenceActivityDormantContext);
+    const state = (0, react_1.useContext)(dormant ? sequence_activity_context_js_1.SequenceActivityAbsoluteTimeContext : TimelineContext_js_1.AbsoluteTimeContext);
     if (state === null) {
         throw new Error('AbsoluteTimeContext is not available. This hook must be used inside a <Player> or the Remotion Studio.');
     }

package/dist/cjs/timeline-track-context.d.ts

@@ -4,6 +4,7 @@ export type TimelineTrack = {
 };
 export type TimelineTrackItem = TimelineTrack & {
     readonly role: 'track' | 'clip' | 'transition' | 'overlay';
+    readonly seriesOffset: number | null;
 };
 export declare const TimelineTrackContext: import("react").Context<TimelineTrack | null>;
 export declare const ExperimentalTracksEnabledContext: import("react").Context<boolean>;

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

@@ -35,9 +35,12 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLazyComponent = void 0;
 const react_1 = __importStar(require("react"));
+const registry_store_js_1 = require("./registry-store.js");
+const use_sync_external_store_js_1 = require("./use-sync-external-store.js");
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? react_1.useEffect : react_1.useLayoutEffect;
 // Expected, it can be any component props
 const useLazyComponent = ({ compProps, componentName, noSuspense, }) => {
-    // Why a ref + stable wrapper instead of returning compProps.component directly?
+    // Why a store + 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.
@@ -46,29 +49,41 @@ const useLazyComponent = ({ compProps, componentName, noSuspense, }) => {
     // 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.
+    // A stable Wrapper preserves the tree across Fast Refresh updates. Publish its
+    // implementation on commit so an abandoned render cannot change the component
+    // exposed by an already registered composition. The subscription updates mounted
+    // wrappers even when the registration's component identity stays the same.
     //
     // 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 componentFromProps = 'component' in compProps
+        ? compProps.component
+        : null;
+    if (componentFromProps === undefined &&
+        typeof document !== 'undefined' &&
+        !noSuspense) {
+        throw new Error(`A value of \`undefined\` was passed to the \`component\` prop. Check the value you are passing to the <${componentName}/> component.`);
     }
+    const lazyComponentFromProps = 'lazyComponent' in compProps ? compProps.lazyComponent : null;
+    const componentStore = (0, react_1.useMemo)(() => (0, registry_store_js_1.createRegistryStore)(componentFromProps !== null && componentFromProps !== void 0 ? componentFromProps : null), 
+    // A new lazy loader replaces the wrapper too. Component edits only update
+    // the existing store on commit, preserving the wrapper identity.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [lazyComponentFromProps]);
+    useIsomorphicLayoutEffect(() => {
+        if (componentFromProps !== null && componentFromProps !== undefined) {
+            componentStore.setSnapshot(() => componentFromProps);
+        }
+    }, [componentFromProps, componentStore]);
     const lazy = (0, react_1.useMemo)(() => {
         if ('component' in compProps) {
             // In SSR, suspense is not yet supported, we cannot use React.lazy
             if (typeof document === 'undefined' || noSuspense) {
                 return compProps.component;
             }
-            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.`);
-            }
             const Wrapper = (props) => {
-                const Comp = componentRef.current;
+                const Comp = (0, use_sync_external_store_js_1.useSyncExternalStore)(componentStore.subscribe, componentStore.getSnapshot, componentStore.getSnapshot);
                 return react_1.default.createElement(Comp, props);
             };
             return Wrapper;
@@ -84,10 +99,9 @@ const useLazyComponent = ({ compProps, componentName, noSuspense, }) => {
         // 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
+        // compProps.component — the stable wrapper subscribes to componentStore instead.
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [compProps.lazyComponent]);
+    }, [lazyComponentFromProps, componentStore]);
     return lazy;
 };
 exports.useLazyComponent = useLazyComponent;

package/dist/cjs/use-media-in-timeline.d.ts

@@ -1,9 +1,5 @@
-import { type LoopVolumeCurveBehavior } from './audio/use-audio-frame.js';
-import type { LoopDisplay } from './CompositionManager.js';
-import type { VolumeProp } from './volume-prop.js';
-export declare const useBasicMediaInTimeline: ({ volume, mediaVolume, src, displayName, trimBefore, trimAfter, playbackRate, sequenceDurationInFrames, mediaStartsAt, mediaFrom, loop, muted, }: {
-    volume: VolumeProp | undefined;
-    mediaVolume: number;
+import type { LoopDisplay, TSequence } from './CompositionManager.js';
+export declare const useBasicMediaInTimeline: ({ src, displayName, trimBefore, trimAfter, playbackRate, sequenceDurationInFrames, mediaStartsAt, loop, muted, }: {
     src: string | undefined;
     displayName: string | null;
     trimBefore: number | undefined;
@@ -11,13 +7,10 @@ export declare const useBasicMediaInTimeline: ({ volume, mediaVolume, src, displ
     playbackRate: number;
     sequenceDurationInFrames: number;
     mediaStartsAt: number;
-    mediaFrom: number;
     loop: boolean;
     muted: boolean;
 }) => {
-    volumes: string | number;
     duration: number;
-    doesVolumeChange: boolean;
     finalDisplayName: string;
     startMediaFrom: number;
     src: string;
@@ -25,9 +18,7 @@ export declare const useBasicMediaInTimeline: ({ volume, mediaVolume, src, displ
     muted: boolean;
 };
 export type BasicMediaInTimelineReturnType = ReturnType<typeof useBasicMediaInTimeline>;
-export declare const useMediaInTimeline: ({ volume, mediaVolume, src, mediaType, playbackRate, displayName, id, getStack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, loopVolumeCurveBehavior, documentationLink, muted, }: {
-    volume: VolumeProp | undefined;
-    mediaVolume: number;
+export declare const useMediaInTimelineRegistration: ({ src, mediaType, playbackRate, displayName, id, getStack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, documentationLink, muted, }: {
     src: string | undefined;
     mediaType: "audio" | "video";
     playbackRate: number;
@@ -38,7 +29,9 @@ export declare const useMediaInTimeline: ({ volume, mediaVolume, src, mediaType,
     premountDisplay: number | null;
     postmountDisplay: number | null;
     loopDisplay: LoopDisplay | undefined;
-    loopVolumeCurveBehavior: LoopVolumeCurveBehavior;
     documentationLink: string | null;
     muted: boolean;
-}) => import("react").RefObject<Element | null> | null;
+}) => {
+    automaticOutlineRef: import("react").RefObject<Element | null> | null;
+    registration: TSequence | null;
+};