remotion 4.0.532 → 4.0.534

package/dist/cjs/SequenceManager.js

@@ -33,13 +33,14 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SequenceManagerProvider = exports.VisualModeSettersContext = exports.VisualModeDragOverridesContext = exports.VisualModePropStatusesRefContext = exports.VisualModePropStatusesContext = exports.makeSequencePropsSubscriptionKey = exports.DisableSequenceRegistrationProvider = exports.DisableSequenceRegistrationContext = exports.SequenceRegistrationContext = exports.SequenceManagerRefContext = exports.SequenceManager = void 0;
+exports.SequenceManagerProvider = exports.VisualModeBatchSettersContext = exports.VisualModeSettersContext = exports.useEffectDragOverridesForNodePath = exports.useActiveFromDragOverrideKeys = exports.useDragOverridesForNodePath = exports.VisualModeDragOverridesContext = exports.VisualModePropStatusesRefContext = exports.VisualModePropStatusesContext = exports.makeSequencePropsSubscriptionKey = exports.VisualModeDragOverridesSubscriptionContext = exports.DisableSequenceRegistrationProvider = exports.DisableSequenceRegistrationContext = exports.SequenceRegistrationContext = exports.SequenceManagerRefContext = exports.useSequenceManagerSequences = exports.SequenceManager = exports.SequenceManagerActionsContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const sequence_order_marker_js_1 = require("./sequence-order-marker.js");
 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 useIsomorphicLayoutEffect = typeof window === 'undefined' ? react_1.default.useEffect : react_1.default.useLayoutEffect;
-exports.SequenceManager = react_1.default.createContext({
+const defaultSequenceManager = {
     registerSequence: () => {
         throw new Error('SequenceManagerContext not initialized');
     },
@@ -48,7 +49,31 @@ exports.SequenceManager = react_1.default.createContext({
         throw new Error('SequenceManagerContext not initialized');
     },
     sequences: [],
+};
+exports.SequenceManagerActionsContext = react_1.default.createContext({
+    registerSequence: defaultSequenceManager.registerSequence,
+    updateSequence: defaultSequenceManager.updateSequence,
+    unregisterSequence: defaultSequenceManager.unregisterSequence,
+});
+exports.SequenceManager = react_1.default.createContext(defaultSequenceManager);
+const NativeSequenceManagerProvider = exports.SequenceManager.Provider;
+const SequenceManagerProviderWithActions = ({ value, children }) => {
+    const actions = (0, react_1.useMemo)(() => ({
+        registerSequence: value.registerSequence,
+        updateSequence: value.updateSequence,
+        unregisterSequence: value.unregisterSequence,
+    }), [value.registerSequence, value.updateSequence, value.unregisterSequence]);
+    return (jsx_runtime_1.jsx(exports.SequenceManagerActionsContext.Provider, { value: actions, children: jsx_runtime_1.jsx(NativeSequenceManagerProvider, { value: value, children: children }) }));
+};
+// Keep custom SequenceManager.Provider trees in sync with the stable actions
+// context while preserving the legacy reactive sequence-list context.
+Object.defineProperty(exports.SequenceManager, 'Provider', {
+    value: SequenceManagerProviderWithActions,
 });
+const useSequenceManagerSequences = () => {
+    return (0, react_1.useContext)(exports.SequenceManager).sequences;
+};
+exports.useSequenceManagerSequences = useSequenceManagerSequences;
 exports.SequenceManagerRefContext = react_1.default.createContext({
     current: [],
 });
@@ -58,6 +83,17 @@ const DisableSequenceRegistrationProvider = ({ children }) => {
     return react_1.default.createElement(exports.DisableSequenceRegistrationContext.Provider, { value: true }, children);
 };
 exports.DisableSequenceRegistrationProvider = DisableSequenceRegistrationProvider;
+exports.VisualModeDragOverridesSubscriptionContext = react_1.default.createContext(null);
+const ActiveFromDragOverrideKeysContext = react_1.default.createContext(null);
+const SequenceManagerScopeProviders = ({ children, dragOverridesSubscription, fromKeys }) => {
+    const manager = (0, react_1.useContext)(exports.SequenceManagerActionsContext);
+    const scopedDragOverridesSubscription = (0, react_1.useMemo)(() => ({ ...dragOverridesSubscription, manager }), [dragOverridesSubscription, manager]);
+    const activeFromDragOverrideKeys = (0, react_1.useMemo)(() => ({ manager, keys: fromKeys }), [fromKeys, manager]);
+    return (jsx_runtime_1.jsx(ActiveFromDragOverrideKeysContext.Provider, { value: activeFromDragOverrideKeys, children: jsx_runtime_1.jsx(exports.VisualModeDragOverridesSubscriptionContext.Provider, { value: scopedDragOverridesSubscription, children: children }) }));
+};
+const emptyDragOverrides = {};
+const emptyFromOverrideKeys = new Set();
+const emptyEffectDragOverrides = {};
 const makeSequencePropsSubscriptionKey = (key) => {
     return `${key.absolutePath}\0${key.nodePath.join('.')}\0${key.sequenceKeys.join('.')}\0${key.effectKeys.map((keys) => keys.join('.')).join('.')}`;
 };
@@ -76,6 +112,67 @@ exports.VisualModeDragOverridesContext = react_1.default.createContext({
         throw new Error('VisualModeDragOverridesContext not initialized');
     },
 });
+/* eslint-disable react-hooks/rules-of-hooks */
+const useDragOverridesForNodePath = (nodePath) => {
+    const subscription = (0, react_1.useContext)(exports.VisualModeDragOverridesSubscriptionContext);
+    const manager = (0, react_1.useContext)(exports.SequenceManagerActionsContext);
+    const scopedSubscription = (subscription === null || subscription === void 0 ? void 0 : subscription.manager) === manager ? subscription : null;
+    // Legacy providers only supply VisualModeDragOverridesContext. Its presence is
+    // fixed for the lifetime of a mounted tree.
+    const legacy = scopedSubscription === null
+        ? (0, react_1.useContext)(exports.VisualModeDragOverridesContext)
+        : null;
+    const key = nodePath === null ? null : (0, exports.makeSequencePropsSubscriptionKey)(nodePath);
+    const subscribe = (0, react_1.useCallback)((listener) => {
+        var _a;
+        return (_a = scopedSubscription === null || scopedSubscription === void 0 ? void 0 : scopedSubscription.subscribe(key, listener)) !== null && _a !== void 0 ? _a : (() => undefined);
+    }, [key, scopedSubscription]);
+    const getSnapshot = (0, react_1.useCallback)(() => {
+        var _a;
+        return (_a = scopedSubscription === null || scopedSubscription === void 0 ? void 0 : scopedSubscription.getSnapshot(key)) !== null && _a !== void 0 ? _a : emptyDragOverrides;
+    }, [key, scopedSubscription]);
+    const overrides = (0, use_sync_external_store_js_1.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+    return legacy !== null && nodePath !== null
+        ? legacy.getDragOverrides(nodePath)
+        : overrides;
+};
+exports.useDragOverridesForNodePath = useDragOverridesForNodePath;
+const useActiveFromDragOverrideKeys = () => {
+    const snapshot = (0, react_1.useContext)(ActiveFromDragOverrideKeysContext);
+    const manager = (0, react_1.useContext)(exports.SequenceManagerActionsContext);
+    return (snapshot === null || snapshot === void 0 ? void 0 : snapshot.manager) === manager ? snapshot.keys : emptyFromOverrideKeys;
+};
+exports.useActiveFromDragOverrideKeys = useActiveFromDragOverrideKeys;
+const useEffectDragOverridesForNodePath = (nodePath, effectCount) => {
+    const subscription = (0, react_1.useContext)(exports.VisualModeDragOverridesSubscriptionContext);
+    const manager = (0, react_1.useContext)(exports.SequenceManagerActionsContext);
+    const scopedSubscription = (subscription === null || subscription === void 0 ? void 0 : subscription.manager) === manager ? subscription : null;
+    // Legacy providers only supply VisualModeDragOverridesContext. Its presence is
+    // fixed for the lifetime of a mounted tree.
+    const legacy = scopedSubscription === null
+        ? (0, react_1.useContext)(exports.VisualModeDragOverridesContext)
+        : null;
+    const key = nodePath === null ? null : (0, exports.makeSequencePropsSubscriptionKey)(nodePath);
+    const subscribe = (0, react_1.useCallback)((listener) => {
+        var _a;
+        return (_a = scopedSubscription === null || scopedSubscription === void 0 ? void 0 : scopedSubscription.subscribeEffects(key, listener)) !== null && _a !== void 0 ? _a : (() => undefined);
+    }, [key, scopedSubscription]);
+    const getSnapshot = (0, react_1.useCallback)(() => {
+        var _a;
+        return (_a = scopedSubscription === null || scopedSubscription === void 0 ? void 0 : scopedSubscription.getEffectSnapshot(key)) !== null && _a !== void 0 ? _a : emptyEffectDragOverrides;
+    }, [key, scopedSubscription]);
+    const overrides = (0, use_sync_external_store_js_1.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+    if (legacy !== null && nodePath !== null) {
+        const legacyOverrides = {};
+        for (let index = 0; index < effectCount; index++) {
+            legacyOverrides[index] = legacy.getEffectDragOverrides(nodePath, index);
+        }
+        return legacyOverrides;
+    }
+    return overrides;
+};
+exports.useEffectDragOverridesForNodePath = useEffectDragOverridesForNodePath;
+/* eslint-enable react-hooks/rules-of-hooks */
 exports.VisualModeSettersContext = react_1.default.createContext({
     setDragOverrides: () => {
         throw new Error('VisualModeSettersContext not initialized');
@@ -96,6 +193,7 @@ exports.VisualModeSettersContext = react_1.default.createContext({
         throw new Error('VisualModeSettersContext not initialized');
     },
 });
+exports.VisualModeBatchSettersContext = react_1.default.createContext(null);
 const effectDragOverridesKey = (nodePath, effectIndex) => `${(0, exports.makeSequencePropsSubscriptionKey)(nodePath)}.effects.${effectIndex}`;
 const SequenceManagerProvider = ({ children }) => {
     const { isStudio } = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
@@ -105,45 +203,202 @@ const SequenceManagerProvider = ({ children }) => {
     const [sequences, setSequences] = (0, react_1.useState)([]);
     const sequencesRef = (0, react_1.useRef)(sequences);
     sequencesRef.current = sequences;
-    const [dragOverrides, setControlOverrides] = (0, react_1.useState)({});
-    const controlOverridesRef = (0, react_1.useRef)(dragOverrides);
-    controlOverridesRef.current = dragOverrides;
+    const [dragOverrideState, setDragOverrideState] = (0, react_1.useState)(() => ({
+        overrides: {},
+        fromKeys: new Set(),
+    }));
+    const dragOverrides = dragOverrideState.overrides;
+    const dragOverridesStore = (0, react_1.useRef)({
+        snapshot: dragOverrides,
+        listeners: new Map(),
+    });
     const [effectDragOverridesState, setEffectDragOverridesState] = (0, react_1.useState)({});
+    const effectDragOverridesStore = (0, react_1.useRef)({
+        snapshot: effectDragOverridesState,
+        byNode: new Map(),
+        listeners: new Map(),
+    });
     const [propStatuses, setPropStatusesMapState] = (0, react_1.useState)({});
     const propStatusesRef = (0, react_1.useRef)(propStatuses);
     propStatusesRef.current = propStatuses;
-    const setDragOverrides = (0, react_1.useCallback)((nodePath, key, value) => {
-        setControlOverrides((prev) => ({
-            ...prev,
-            [(0, exports.makeSequencePropsSubscriptionKey)(nodePath)]: {
-                ...prev[(0, exports.makeSequencePropsSubscriptionKey)(nodePath)],
-                [key]: value,
-            },
-        }));
+    const setDragOverridesBatch = (0, react_1.useCallback)((overrides) => {
+        setDragOverrideState((prevState) => {
+            var _a;
+            const prev = prevState.overrides;
+            let next = null;
+            let nextFromKeys = prevState.fromKeys;
+            for (const { nodePath, key, value } of overrides) {
+                const mapKey = (0, exports.makeSequencePropsSubscriptionKey)(nodePath);
+                const existing = (_a = (next !== null && next !== void 0 ? next : prev)[mapKey]) === null || _a === void 0 ? void 0 : _a[key];
+                if (existing === value ||
+                    ((existing === null || existing === void 0 ? void 0 : existing.type) === 'static' &&
+                        value.type === 'static' &&
+                        Object.is(existing.value, value.value))) {
+                    continue;
+                }
+                if (next === null) {
+                    next = { ...prev };
+                }
+                if (next[mapKey] === prev[mapKey]) {
+                    next[mapKey] = { ...prev[mapKey] };
+                }
+                next[mapKey][key] = value;
+                if (key === 'from' && !nextFromKeys.has(mapKey)) {
+                    nextFromKeys = new Set(nextFromKeys);
+                    nextFromKeys.add(mapKey);
+                }
+            }
+            return next === null
+                ? prevState
+                : { overrides: next, fromKeys: nextFromKeys };
+        });
+    }, []);
+    const setDragOverrides = (0, react_1.useCallback)((nodePath, key, value) => setDragOverridesBatch([{ nodePath, key, value }]), [setDragOverridesBatch]);
+    const subscribeDragOverrides = (0, react_1.useCallback)((key, listener) => {
+        if (key === null) {
+            return () => undefined;
+        }
+        let listeners = dragOverridesStore.current.listeners.get(key);
+        if (!listeners) {
+            listeners = new Set();
+            dragOverridesStore.current.listeners.set(key, listeners);
+        }
+        listeners.add(listener);
+        return () => {
+            listeners.delete(listener);
+            if (listeners.size === 0) {
+                dragOverridesStore.current.listeners.delete(key);
+            }
+        };
+    }, []);
+    const getDragOverridesSnapshot = (0, react_1.useCallback)((key) => {
+        var _a;
+        return key === null
+            ? emptyDragOverrides
+            : ((_a = dragOverridesStore.current.snapshot[key]) !== null && _a !== void 0 ? _a : emptyDragOverrides);
+    }, []);
+    useIsomorphicLayoutEffect(() => {
+        var _a;
+        const previous = dragOverridesStore.current.snapshot;
+        dragOverridesStore.current.snapshot = dragOverrides;
+        for (const key of new Set([
+            ...Object.keys(previous),
+            ...Object.keys(dragOverrides),
+        ])) {
+            if (previous[key] !== dragOverrides[key]) {
+                for (const listener of (_a = dragOverridesStore.current.listeners.get(key)) !== null && _a !== void 0 ? _a : []) {
+                    listener();
+                }
+            }
+        }
+    }, [dragOverrides]);
+    const subscribeEffectDragOverrides = (0, react_1.useCallback)((key, listener) => {
+        if (key === null) {
+            return () => undefined;
+        }
+        let listeners = effectDragOverridesStore.current.listeners.get(key);
+        if (!listeners) {
+            listeners = new Set();
+            effectDragOverridesStore.current.listeners.set(key, listeners);
+        }
+        listeners.add(listener);
+        return () => {
+            listeners.delete(listener);
+            if (listeners.size === 0) {
+                effectDragOverridesStore.current.listeners.delete(key);
+            }
+        };
+    }, []);
+    const getEffectDragOverridesSnapshot = (0, react_1.useCallback)((key) => {
+        var _a;
+        return key === null
+            ? emptyEffectDragOverrides
+            : ((_a = effectDragOverridesStore.current.byNode.get(key)) !== null && _a !== void 0 ? _a : emptyEffectDragOverrides);
     }, []);
+    useIsomorphicLayoutEffect(() => {
+        var _a;
+        const previous = effectDragOverridesStore.current.snapshot;
+        const byNode = new Map(effectDragOverridesStore.current.byNode);
+        const changedNodes = new Set();
+        for (const flatKey of new Set([
+            ...Object.keys(previous),
+            ...Object.keys(effectDragOverridesState),
+        ])) {
+            if (previous[flatKey] === effectDragOverridesState[flatKey]) {
+                continue;
+            }
+            const separator = flatKey.lastIndexOf('.effects.');
+            if (separator === -1) {
+                throw new Error('Invalid effect drag override key');
+            }
+            const nodeKey = flatKey.slice(0, separator);
+            const effectIndex = flatKey.slice(separator + '.effects.'.length);
+            if (!changedNodes.has(nodeKey)) {
+                byNode.set(nodeKey, { ...byNode.get(nodeKey) });
+                changedNodes.add(nodeKey);
+            }
+            const next = byNode.get(nodeKey);
+            if (effectDragOverridesState[flatKey] === undefined) {
+                delete next[effectIndex];
+            }
+            else {
+                next[effectIndex] = effectDragOverridesState[flatKey];
+            }
+        }
+        for (const nodeKey of changedNodes) {
+            if (Object.keys(byNode.get(nodeKey)).length === 0) {
+                byNode.delete(nodeKey);
+            }
+        }
+        effectDragOverridesStore.current.snapshot = effectDragOverridesState;
+        effectDragOverridesStore.current.byNode = byNode;
+        for (const nodeKey of changedNodes) {
+            for (const listener of (_a = effectDragOverridesStore.current.listeners.get(nodeKey)) !== null && _a !== void 0 ? _a : []) {
+                listener();
+            }
+        }
+    }, [effectDragOverridesState]);
     const clearDragOverrides = (0, react_1.useCallback)((nodePath) => {
-        setControlOverrides((prev) => {
+        setDragOverrideState((prevState) => {
+            const prev = prevState.overrides;
             const key = (0, exports.makeSequencePropsSubscriptionKey)(nodePath);
             if (!prev[key]) {
-                return prev;
+                return prevState;
             }
             const next = { ...prev };
             delete next[key];
-            return next;
+            const nextFromKeys = prevState.fromKeys.has(key)
+                ? new Set(prevState.fromKeys)
+                : prevState.fromKeys;
+            nextFromKeys.delete(key);
+            return { overrides: next, fromKeys: nextFromKeys };
         });
     }, []);
-    const setEffectDragOverrides = (0, react_1.useCallback)((nodePath, effectIndex, key, value) => {
+    const setEffectDragOverridesBatch = (0, react_1.useCallback)((overrides) => {
         setEffectDragOverridesState((prev) => {
-            const mapKey = effectDragOverridesKey(nodePath, effectIndex);
-            return {
-                ...prev,
-                [mapKey]: {
-                    ...prev[mapKey],
-                    [key]: value,
-                },
-            };
+            var _a;
+            let next = null;
+            for (const { nodePath, effectIndex, key, value } of overrides) {
+                const mapKey = effectDragOverridesKey(nodePath, effectIndex);
+                const existing = (_a = (next !== null && next !== void 0 ? next : prev)[mapKey]) === null || _a === void 0 ? void 0 : _a[key];
+                if (existing === value ||
+                    ((existing === null || existing === void 0 ? void 0 : existing.type) === 'static' &&
+                        value.type === 'static' &&
+                        Object.is(existing.value, value.value))) {
+                    continue;
+                }
+                if (next === null) {
+                    next = { ...prev };
+                }
+                if (next[mapKey] === prev[mapKey]) {
+                    next[mapKey] = { ...prev[mapKey] };
+                }
+                next[mapKey][key] = value;
+            }
+            return next !== null && next !== void 0 ? next : prev;
         });
     }, []);
+    const setEffectDragOverrides = (0, react_1.useCallback)((nodePath, effectIndex, key, value) => setEffectDragOverridesBatch([{ nodePath, effectIndex, key, value }]), [setEffectDragOverridesBatch]);
     const clearEffectDragOverrides = (0, react_1.useCallback)((nodePath, effectIndex) => {
         setEffectDragOverridesState((prev) => {
             const mapKey = effectDragOverridesKey(nodePath, effectIndex);
@@ -250,11 +505,31 @@ const SequenceManagerProvider = ({ children }) => {
             if (index === -1) {
                 return seqs;
             }
+            const previousSequence = seqs[index];
+            const timelineOrder = (_b = (_a = committedOrderRef.current) === null || _a === void 0 ? void 0 : _a.get(seq.id)) !== null && _b !== void 0 ? _b : null;
+            // A new registration getter does not necessarily change the metadata.
+            let unchanged = Object.is(previousSequence.timelineOrder, timelineOrder);
+            // The manager adds timelineOrder even if the incoming object omits it.
+            let keyCount = 1;
+            if (unchanged) {
+                for (const key in seq) {
+                    if (key === 'timelineOrder' ||
+                        !Object.prototype.hasOwnProperty.call(seq, key)) {
+                        continue;
+                    }
+                    keyCount++;
+                    if (!Object.prototype.hasOwnProperty.call(previousSequence, key) ||
+                        !Object.is(previousSequence[key], seq[key])) {
+                        unchanged = false;
+                        break;
+                    }
+                }
+            }
+            if (unchanged && Object.keys(previousSequence).length === keyCount) {
+                return seqs;
+            }
             const next = [...seqs];
-            next[index] = {
-                ...seq,
-                timelineOrder: (_b = (_a = committedOrderRef.current) === null || _a === void 0 ? void 0 : _a.get(seq.id)) !== null && _b !== void 0 ? _b : null,
-            };
+            next[index] = { ...seq, timelineOrder };
             return next;
         });
     }, []);
@@ -269,6 +544,17 @@ const SequenceManagerProvider = ({ children }) => {
             unregisterSequence,
         };
     }, [registerSequence, sequences, unregisterSequence, updateSequence]);
+    const dragOverridesSubscription = (0, react_1.useMemo)(() => ({
+        subscribe: subscribeDragOverrides,
+        getSnapshot: getDragOverridesSnapshot,
+        subscribeEffects: subscribeEffectDragOverrides,
+        getEffectSnapshot: getEffectDragOverridesSnapshot,
+    }), [
+        getDragOverridesSnapshot,
+        getEffectDragOverridesSnapshot,
+        subscribeDragOverrides,
+        subscribeEffectDragOverrides,
+    ]);
     const getDragOverrides = (0, react_1.useCallback)((nodePath) => {
         var _a;
         return (_a = dragOverrides[(0, exports.makeSequencePropsSubscriptionKey)(nodePath)]) !== null && _a !== void 0 ? _a : {};
@@ -305,7 +591,8 @@ const SequenceManagerProvider = ({ children }) => {
         setPropStatuses,
         remapPropStatuses,
     ]);
-    const providers = (jsx_runtime_1.jsx(exports.SequenceManagerRefContext.Provider, { value: sequencesRef, children: jsx_runtime_1.jsx(exports.SequenceManager.Provider, { value: sequenceContext, children: jsx_runtime_1.jsx(exports.VisualModePropStatusesRefContext.Provider, { value: propStatusesRef, children: jsx_runtime_1.jsx(exports.VisualModePropStatusesContext.Provider, { value: propStatusesContext, children: jsx_runtime_1.jsx(exports.VisualModeDragOverridesContext.Provider, { value: dragOverridesContext, children: jsx_runtime_1.jsx(exports.VisualModeSettersContext.Provider, { value: settersContext, children: children }) }) }) }) }) }));
+    const batchSettersContext = (0, react_1.useMemo)(() => ({ setDragOverridesBatch, setEffectDragOverridesBatch }), [setDragOverridesBatch, setEffectDragOverridesBatch]);
+    const providers = (jsx_runtime_1.jsx(exports.SequenceManagerRefContext.Provider, { value: sequencesRef, children: jsx_runtime_1.jsx(exports.SequenceManager.Provider, { value: sequenceContext, children: jsx_runtime_1.jsx(exports.VisualModePropStatusesRefContext.Provider, { value: propStatusesRef, children: jsx_runtime_1.jsx(exports.VisualModePropStatusesContext.Provider, { value: propStatusesContext, children: jsx_runtime_1.jsx(SequenceManagerScopeProviders, { dragOverridesSubscription: dragOverridesSubscription, fromKeys: dragOverrideState.fromKeys, children: jsx_runtime_1.jsx(exports.VisualModeDragOverridesContext.Provider, { value: dragOverridesContext, children: jsx_runtime_1.jsx(exports.VisualModeSettersContext.Provider, { value: settersContext, children: jsx_runtime_1.jsx(exports.VisualModeBatchSettersContext.Provider, { value: batchSettersContext, children: children }) }) }) }) }) }) }) }));
     return isStudio ? (jsx_runtime_1.jsx(sequence_order_marker_js_1.SequenceManagerOrderMarker, { managerId: sequenceManagerId, children: providers })) : (providers);
 };
 exports.SequenceManagerProvider = SequenceManagerProvider;

package/dist/cjs/Track.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { type SequenceProps } from './Sequence.js';
+export type TrackProps = Pick<SequenceProps, 'children' | 'name' | 'from' | 'durationInFrames' | 'hidden' | 'showInTimeline'>;
+export declare const TrackWithoutSchema: React.FC<SequenceProps>;
+/** Groups clips on one Studio timeline row and applies Sequence timing. */
+export declare const Track: React.ComponentType<TrackProps>;

package/dist/cjs/Track.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Track = exports.TrackWithoutSchema = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
+const interactivity_schema_js_1 = require("./interactivity-schema.js");
+const Sequence_js_1 = require("./Sequence.js");
+const timeline_track_context_js_1 = require("./timeline-track-context.js");
+const with_interactivity_schema_js_1 = require("./with-interactivity-schema.js");
+const trackSchema = {
+    name: interactivity_schema_js_1.sequenceSchema.name,
+    hidden: interactivity_schema_js_1.sequenceSchema.hidden,
+};
+// Series variants share the Track foundation while retaining their own
+// Sequence props, layout defaults, and interactivity schemas.
+const TrackWithoutSchema = ({ name = 'Track', children, layout = 'none', ...props }) => {
+    const [id] = (0, react_1.useState)(() => String(Math.random()));
+    const tracksEnabled = (0, react_1.useContext)(timeline_track_context_js_1.ExperimentalTracksEnabledContext);
+    const value = (0, react_1.useMemo)(() => (tracksEnabled ? { id, name } : null), [id, name, tracksEnabled]);
+    return (jsx_runtime_1.jsx(timeline_track_context_js_1.TimelineTrackContext.Provider, { value: value, children: jsx_runtime_1.jsx(Sequence_js_1.SequenceWithoutSchema, { ...props, name: name, layout: layout, _remotionInternalTimelineTrack: { role: 'track' }, children: children }) }));
+};
+exports.TrackWithoutSchema = TrackWithoutSchema;
+/** Groups clips on one Studio timeline row and applies Sequence timing. */
+exports.Track = (0, with_interactivity_schema_js_1.withInteractivitySchema)({
+    Component: exports.TrackWithoutSchema,
+    componentName: '<Track>',
+    componentIdentity: 'dev.remotion.remotion.Track',
+    schema: trackSchema,
+    supportsEffects: false,
+});
+(0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(exports.Track);

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

@@ -52,7 +52,7 @@ const getCanvasPropsFromSequenceProps = (props) => {
     return canvasProps;
 };
 const AnimatedImageContent = (0, react_2.forwardRef)(({ src, width, height, onError, loopBehavior = 'loop', playbackRate = 1, fit = 'fill', requestInit, effects, controls, ...props }, canvasRef) => {
-    var _a;
+    var _a, _b;
     const resolvedSrc = (0, resolve_image_source_1.resolveAnimatedImageSource)(src);
     const [imageDecoder, setImageDecoder] = (0, react_2.useState)(null);
     const { delayRender, continueRender } = (0, use_delay_render_js_1.useDelayRender)();
@@ -69,6 +69,7 @@ const AnimatedImageContent = (0, react_2.forwardRef)(({ src, width, height, onEr
     const memoizedEffects = (0, use_memoized_effects_js_1.useMemoizedEffects)({
         effects,
         overrideId: (_a = controls === null || controls === void 0 ? void 0 : controls.overrideId) !== null && _a !== void 0 ? _a : null,
+        videoConfigValues: (_b = controls === null || controls === void 0 ? void 0 : controls.videoConfigValues) !== null && _b !== void 0 ? _b : null,
     });
     (0, react_2.useImperativeHandle)(canvasRef, () => {
         var _a;

package/dist/cjs/canvas-image/CanvasImage.js

@@ -111,7 +111,7 @@ const waitForNextFrame = ({ onFrame, }) => {
     return () => cancelAnimationFrame(frame);
 };
 const CanvasImageContent = (0, react_1.forwardRef)(({ src, crossOrigin, width, height, fit = 'fill', effects, controls, onError, className, style, id, pauseWhenLoading, maxRetries = 2, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...canvasProps }, ref) => {
-    var _a;
+    var _a, _b;
     const { delayRender, continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
     const { delayPlayback } = (0, use_buffer_state_js_1.useBufferState)();
     const [outputCanvas, setOutputCanvas] = (0, react_1.useState)(null);
@@ -121,6 +121,7 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, crossOrigin, width, h
     const memoizedEffects = (0, use_memoized_effects_js_1.useMemoizedEffects)({
         effects,
         overrideId: (_a = controls === null || controls === void 0 ? void 0 : controls.overrideId) !== null && _a !== void 0 ? _a : null,
+        videoConfigValues: (_b = controls === null || controls === void 0 ? void 0 : controls.videoConfigValues) !== null && _b !== void 0 ? _b : null,
     });
     const sequenceContext = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
     const pendingLoadDelayRef = (0, react_1.useRef)(null);

package/dist/cjs/effects/Solid.js

@@ -65,7 +65,7 @@ exports.solidSchema = {
     ...interactivity_schema_js_1.borderRadiusSchema,
     ...interactivity_schema_js_1.cropSchema,
 };
-const SolidInner = ({ color, width, height, effects = [], className, style, pixelDensity, overrideId, reference, }) => {
+const SolidInner = ({ color, width, height, effects = [], className, style, pixelDensity, overrideId, videoConfigValues, reference, }) => {
     const { delayRender, continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
     const resolvedPixelDensity = resolveSolidPixelDensity(pixelDensity);
     const canvasWidth = Math.ceil(width * resolvedPixelDensity);
@@ -74,6 +74,7 @@ const SolidInner = ({ color, width, height, effects = [], className, style, pixe
     const memoizedEffects = (0, use_memoized_effects_js_1.useMemoizedEffects)({
         effects,
         overrideId: overrideId !== null && overrideId !== void 0 ? overrideId : null,
+        videoConfigValues,
     });
     const sourceCanvas = (0, react_1.useMemo)(() => {
         if (typeof document === 'undefined') {
@@ -157,7 +158,7 @@ const SolidInner = ({ color, width, height, effects = [], className, style, pixe
     return (jsx_runtime_1.jsx("canvas", { ref: canvasRef, width: canvasWidth, height: canvasHeight, className: className, style: canvasStyle }));
 };
 const SolidOuter = (0, react_1.forwardRef)(({ effects = [], controls, color, height, width, className, durationInFrames, style, name, from, premountFor, postmountFor, styleWhilePremounted, styleWhilePostmounted, trimBefore, playbackRate, loop, freeze, hidden, showInTimeline, pixelDensity, cropLeft, cropRight, cropTop, cropBottom, ...props }, ref) => {
-    var _a;
+    var _a, _b;
     props;
     const memoizedEffectDefinitions = (0, use_memoized_effects_js_1.useMemoizedEffectDefinitions)(effects);
     const actualRef = (0, react_1.useRef)(null);
@@ -186,7 +187,7 @@ const SolidOuter = (0, react_1.forwardRef)(({ effects = [], controls, color, hei
         style: premountingStyle,
         componentName: '<Solid />',
     });
-    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, _remotionInternalIsPremounting: premountingActive, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from, trimBefore: trimBefore, playbackRate: playbackRate, loop: loop, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline, controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : '<Solid>', _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/solid", ...props, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: jsx_runtime_1.jsx(SolidInner, { reference: actualRef, overrideId: (_a = controls === null || controls === void 0 ? void 0 : controls.overrideId) !== null && _a !== void 0 ? _a : null, color: color, height: height, width: width, className: className, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, effects: effects, pixelDensity: pixelDensity }) }) }));
+    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, _remotionInternalIsPremounting: premountingActive, children: jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: from, trimBefore: trimBefore, playbackRate: playbackRate, loop: loop, freeze: freeze, hidden: hidden, showInTimeline: showInTimeline, controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : '<Solid>', _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/solid", ...props, _remotionInternalPremountDisplay: effectivePremountFor || null, _remotionInternalPostmountDisplay: effectivePostmountFor || null, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, children: jsx_runtime_1.jsx(SolidInner, { reference: actualRef, videoConfigValues: (_a = controls === null || controls === void 0 ? void 0 : controls.videoConfigValues) !== null && _a !== void 0 ? _a : null, overrideId: (_b = controls === null || controls === void 0 ? void 0 : controls.overrideId) !== null && _b !== void 0 ? _b : null, color: color, height: height, width: width, className: className, style: croppedStyle !== null && croppedStyle !== void 0 ? croppedStyle : undefined, effects: effects, pixelDensity: pixelDensity }) }) }));
 });
 exports.Solid = (0, with_interactivity_schema_js_1.withInteractivitySchema)({
     Component: SolidOuter,

package/dist/cjs/effects/use-memoized-effects.d.ts

@@ -2,6 +2,7 @@ import type { RuntimeValueStore } from '../runtime-value-store.js';
 import type { CannotUpdateEffectReason, CannotUpdateSequenceReason } from '../SequenceManager.js';
 import { type SequencePropsSubscriptionKey } from '../SequenceManager.js';
 import { type CanUpdateSequencePropStatus, type PropStatuses } from '../use-schema.js';
+import type { VideoConfigValues } from '../video-config.js';
 import type { EffectDefinitionAndStack, EffectDescriptor, EffectDefinition } from './effect-types.js';
 export declare const useMemoizedEffectDefinitions: (effects: readonly EffectDescriptor<unknown>[]) => readonly EffectDefinition<unknown>[] & {
     readonly runtimeValues: readonly RuntimeValueStore[];
@@ -23,8 +24,9 @@ export declare const getEffectPropStatusesCtx: ({ propStatuses, nodePath, effect
 }) => EffectStatus;
 export declare const getPropStatusesCtx: (propStatuses: PropStatuses, nodePath: SequencePropsSubscriptionKey) => Record<string, CanUpdateSequencePropStatus> | undefined;
 export type GetPropStatusesType = typeof getPropStatusesCtx;
-export declare const useMemoizedEffects: ({ effects, overrideId, }: {
+export declare const useMemoizedEffects: ({ effects, overrideId, videoConfigValues, }: {
     effects: readonly EffectDescriptor<unknown>[];
     readonly overrideId: string | null;
+    videoConfigValues: VideoConfigValues | null;
 }) => EffectDefinitionAndStack<unknown>[];
 export {};

package/dist/cjs/effects/use-memoized-effects.js

@@ -2,12 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMemoizedEffects = exports.getPropStatusesCtx = exports.getEffectPropStatusesCtx = exports.useMemoizedEffectDefinitions = void 0;
 const react_1 = require("react");
+const evaluate_source_expressions_js_1 = require("../evaluate-source-expressions.js");
 const get_effective_visual_mode_value_js_1 = require("../get-effective-visual-mode-value.js");
 const interpolate_keyframed_status_js_1 = require("../interpolate-keyframed-status.js");
 const runtime_value_store_js_1 = require("../runtime-value-store.js");
 const sequence_node_path_js_1 = require("../sequence-node-path.js");
 const SequenceManager_js_1 = require("../SequenceManager.js");
 const use_current_frame_js_1 = require("../use-current-frame.js");
+const emptyDragOverrides = {};
 const mergeOverrides = ({ descriptor, propStatusOverrides, dragOverrides, frame, }) => {
     if (!propStatusOverrides && !dragOverrides) {
         return { params: descriptor.params, effectKey: descriptor.effectKey };
@@ -105,7 +107,10 @@ const getEffectPropStatusesCtx = ({ propStatuses, nodePath, effectIndex, }) => {
     if (!effect.canUpdate) {
         return { type: 'cannot-update-effect', reason: effect.reason };
     }
-    return { type: 'can-update-effect', props: effect.props };
+    return {
+        type: 'can-update-effect',
+        props: (0, evaluate_source_expressions_js_1.evaluateSourcePropStatuses)(effect.props, nodePath.videoConfigValues),
+    };
 };
 exports.getEffectPropStatusesCtx = getEffectPropStatusesCtx;
 const getPropStatusesCtx = (propStatuses, nodePath) => {
@@ -116,21 +121,22 @@ const getPropStatusesCtx = (propStatuses, nodePath) => {
     if (!status.canUpdate) {
         return undefined;
     }
-    return status.props;
+    return (0, evaluate_source_expressions_js_1.evaluateSourcePropStatuses)(status.props, nodePath.videoConfigValues);
 };
 exports.getPropStatusesCtx = getPropStatusesCtx;
-const useMemoizedEffects = ({ effects, overrideId, }) => {
+const useMemoizedEffects = ({ effects, overrideId, videoConfigValues, }) => {
     var _a;
     const previousRef = (0, react_1.useRef)(null);
     const { propStatuses } = (0, react_1.useContext)(SequenceManager_js_1.VisualModePropStatusesContext);
-    const { getEffectDragOverrides } = (0, react_1.useContext)(SequenceManager_js_1.VisualModeDragOverridesContext);
     const frame = (0, use_current_frame_js_1.useCurrentFrame)();
     const { overrideIdToNodePathMappings } = (0, react_1.useContext)(sequence_node_path_js_1.OverrideIdsToNodePathsGettersContext);
     const previous = previousRef.current;
     const nodePath = overrideId
         ? ((_a = overrideIdToNodePathMappings[overrideId]) !== null && _a !== void 0 ? _a : null)
         : null;
+    const effectDragOverrides = (0, SequenceManager_js_1.useEffectDragOverridesForNodePath)(nodePath, effects.length);
     const resolved = effects.map((descriptor, index) => {
+        var _a;
         if (nodePath === null) {
             return {
                 descriptor,
@@ -140,13 +146,13 @@ const useMemoizedEffects = ({ effects, overrideId, }) => {
         }
         const effectStatus = (0, exports.getEffectPropStatusesCtx)({
             propStatuses,
-            nodePath,
+            nodePath: { ...nodePath, videoConfigValues },
             effectIndex: index,
         });
         const propStatusOverrides = effectStatus.type === 'can-update-effect'
             ? resolvePropStatusOverrides(effectStatus.props, frame)
             : null;
-        const dragOverridesMap = getEffectDragOverrides(nodePath, index);
+        const dragOverridesMap = (_a = effectDragOverrides[index]) !== null && _a !== void 0 ? _a : emptyDragOverrides;
         const dragOverrides = Object.keys(dragOverridesMap).length === 0 ? null : dragOverridesMap;
         const { params, effectKey } = mergeOverrides({
             descriptor,

package/dist/cjs/evaluate-source-expressions.d.ts

@@ -0,0 +1,5 @@
+import type { CanUpdateSequencePropSource, CanUpdateSequencePropStatus, SourceNumericValue } from './use-schema.js';
+import type { VideoConfigValues } from './video-config.js';
+export declare const evaluateSourceNumericValue: (expression: SourceNumericValue, config: VideoConfigValues | null) => number;
+/** Resolve at the consumer, never in the shared source subscription cache. */
+export declare const evaluateSourcePropStatuses: (props: Record<string, CanUpdateSequencePropSource>, config: VideoConfigValues | null) => Record<string, CanUpdateSequencePropStatus>;