@remotion/studio 4.0.460 → 4.0.461

package/dist/components/Timeline/TimelineNumberField.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
-import type { SchemaFieldInfo } from '../../helpers/timeline-layout';
+import type { CanUpdateSequencePropStatus } from 'remotion';
+import type { SchemaFieldInfo, TimelineFieldOnDragValueChange, TimelineFieldOnSave } from '../../helpers/timeline-layout';
 export declare const TimelineNumberField: React.FC<{
     readonly field: SchemaFieldInfo;
     readonly effectiveValue: unknown;
-    readonly codeValue: unknown;
-    readonly canUpdate: boolean;
-    readonly onSave: (key: string, value: unknown) => Promise<void>;
-    readonly onDragValueChange: (key: string, value: unknown) => void;
+    readonly propStatus: CanUpdateSequencePropStatus;
+    readonly onSave: TimelineFieldOnSave;
+    readonly onDragValueChange: TimelineFieldOnDragValueChange;
     readonly onDragEnd: () => void;
 }>;

package/dist/components/Timeline/TimelineNumberField.js

@@ -5,16 +5,16 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const InputDragger_1 = require("../NewComposition/InputDragger");
 const timeline_field_utils_1 = require("./timeline-field-utils");
-const TimelineNumberField = ({ field, effectiveValue, canUpdate, onSave, onDragValueChange, onDragEnd, codeValue, }) => {
+const TimelineNumberField = ({ field, effectiveValue, onSave, onDragValueChange, onDragEnd, propStatus, }) => {
     var _a, _b, _c;
     const [dragValue, setDragValue] = (0, react_1.useState)(null);
     const onValueChange = (0, react_1.useCallback)((newVal) => {
         setDragValue(newVal);
-        onDragValueChange(field.key, newVal);
-    }, [onDragValueChange, field.key]);
+        onDragValueChange(newVal);
+    }, [onDragValueChange]);
     const onValueChangeEnd = (0, react_1.useCallback)((newVal) => {
-        if (canUpdate && newVal !== codeValue) {
-            onSave(field.key, newVal).finally(() => {
+        if (propStatus.canUpdate && newVal !== propStatus.codeValue) {
+            onSave(newVal).finally(() => {
                 setDragValue(null);
                 onDragEnd();
             });
@@ -23,18 +23,20 @@ const TimelineNumberField = ({ field, effectiveValue, canUpdate, onSave, onDragV
             setDragValue(null);
             onDragEnd();
         }
-    }, [canUpdate, onSave, field.key, codeValue, onDragEnd]);
+    }, [onSave, propStatus, onDragEnd]);
     const onTextChange = (0, react_1.useCallback)((newVal) => {
-        if (canUpdate) {
+        if (propStatus.canUpdate) {
             const parsed = Number(newVal);
-            if (!Number.isNaN(parsed) && parsed !== codeValue) {
+            if (!Number.isNaN(parsed) &&
+                propStatus.canUpdate &&
+                parsed !== propStatus.codeValue) {
                 setDragValue(parsed);
-                onSave(field.key, parsed).catch(() => {
+                onSave(parsed).catch(() => {
                     setDragValue(null);
                 });
             }
         }
-    }, [canUpdate, onSave, field.key, codeValue]);
+    }, [onSave, propStatus]);
     const step = field.fieldSchema.type === 'number' ? ((_a = field.fieldSchema.step) !== null && _a !== void 0 ? _a : 1) : 1;
     const stepDecimals = (0, react_1.useMemo)(() => (0, timeline_field_utils_1.getDecimalPlaces)(step), [step]);
     const formatter = (0, react_1.useCallback)((v) => {

package/dist/components/Timeline/TimelineRotationField.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
-import type { SchemaFieldInfo } from '../../helpers/timeline-layout';
+import type { CanUpdateSequencePropStatus } from 'remotion';
+import type { SchemaFieldInfo, TimelineFieldOnDragValueChange, TimelineFieldOnSave } from '../../helpers/timeline-layout';
 export declare const TimelineRotationField: React.FC<{
     readonly field: SchemaFieldInfo;
     readonly effectiveValue: unknown;
-    readonly codeValue: unknown;
-    readonly canUpdate: boolean;
-    readonly onSave: (key: string, value: unknown) => Promise<void>;
-    readonly onDragValueChange: (key: string, value: unknown) => void;
+    readonly propStatus: CanUpdateSequencePropStatus;
+    readonly onSave: TimelineFieldOnSave;
+    readonly onDragValueChange: TimelineFieldOnDragValueChange;
     readonly onDragEnd: () => void;
 }>;

package/dist/components/Timeline/TimelineRotationField.js

@@ -25,18 +25,18 @@ const parseCssRotationToDegrees = (value) => {
         return 0;
     }
 };
-const TimelineRotationField = ({ field, effectiveValue, codeValue, canUpdate, onSave, onDragValueChange, onDragEnd, }) => {
+const TimelineRotationField = ({ field, effectiveValue, propStatus, onSave, onDragValueChange, onDragEnd, }) => {
     var _a;
     const [dragValue, setDragValue] = (0, react_1.useState)(null);
     const degrees = (0, react_1.useMemo)(() => parseCssRotationToDegrees(String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '0deg')), [effectiveValue]);
     const onValueChange = (0, react_1.useCallback)((newVal) => {
         setDragValue(newVal);
-        onDragValueChange(field.key, `${newVal}deg`);
-    }, [onDragValueChange, field.key]);
+        onDragValueChange(`${newVal}deg`);
+    }, [onDragValueChange]);
     const onValueChangeEnd = (0, react_1.useCallback)((newVal) => {
         const newStr = `${newVal}deg`;
-        if (canUpdate && newStr !== codeValue) {
-            onSave(field.key, newStr).finally(() => {
+        if (propStatus.canUpdate && newStr !== propStatus.codeValue) {
+            onSave(newStr).finally(() => {
                 setDragValue(null);
                 onDragEnd();
             });
@@ -45,21 +45,21 @@ const TimelineRotationField = ({ field, effectiveValue, codeValue, canUpdate, on
             setDragValue(null);
             onDragEnd();
         }
-    }, [canUpdate, onSave, field.key, codeValue, onDragEnd]);
+    }, [propStatus, onSave, onDragEnd]);
     const onTextChange = (0, react_1.useCallback)((newVal) => {
-        if (canUpdate) {
+        if (propStatus.canUpdate) {
             const parsed = Number(newVal);
             if (!Number.isNaN(parsed)) {
                 const newStr = `${parsed}deg`;
-                if (newStr !== codeValue) {
+                if (newStr !== propStatus.codeValue) {
                     setDragValue(parsed);
-                    onSave(field.key, newStr).catch(() => {
+                    onSave(newStr).catch(() => {
                         setDragValue(null);
                     });
                 }
             }
         }
-    }, [canUpdate, onSave, field.key, codeValue]);
+    }, [propStatus, onSave]);
     const step = field.fieldSchema.type === 'rotation' ? ((_a = field.fieldSchema.step) !== null && _a !== void 0 ? _a : 1) : 1;
     const stepDecimals = (0, react_1.useMemo)(() => (0, timeline_field_utils_1.getDecimalPlaces)(step), [step]);
     const formatter = (0, react_1.useCallback)((v) => {

package/dist/components/Timeline/TimelineSchemaField.d.ts

@@ -1,13 +1,11 @@
 import React from 'react';
 import type { CanUpdateSequencePropStatus } from 'remotion';
-import type { SchemaFieldInfo } from '../../helpers/timeline-layout';
+import type { SchemaFieldInfo, TimelineFieldOnDragValueChange, TimelineFieldOnSave } from '../../helpers/timeline-layout';
 export declare const TimelineFieldValue: React.FC<{
     readonly field: SchemaFieldInfo;
-    readonly onSave: (key: string, value: unknown) => Promise<void>;
-    readonly onDragValueChange: (key: string, value: unknown) => void;
+    readonly onSave: TimelineFieldOnSave;
+    readonly onDragValueChange: TimelineFieldOnDragValueChange;
     readonly onDragEnd: () => void;
-    readonly canUpdate: boolean;
-    readonly propStatus: CanUpdateSequencePropStatus | null;
-    readonly codeValue: unknown;
+    readonly propStatus: CanUpdateSequencePropStatus;
     readonly effectiveValue: unknown;
 }>;

package/dist/components/Timeline/TimelineSchemaField.js

@@ -20,36 +20,33 @@ const notEditableBackground = {
 const inlineWrapper = {
     fontSize: 12,
 };
-const TimelineFieldValue = ({ field, onSave, onDragValueChange, onDragEnd, propStatus, canUpdate, effectiveValue, codeValue, }) => {
-    const wrapperStyle = canUpdate === null || canUpdate === false
+const TimelineFieldValue = ({ field, onSave, onDragValueChange, onDragEnd, propStatus, effectiveValue, }) => {
+    const wrapperStyle = !propStatus.canUpdate
         ? notEditableBackground
         : undefined;
     if (!field.supported) {
         return jsx_runtime_1.jsx("span", { style: unsupportedLabel, children: "unsupported" });
     }
-    if (propStatus !== null && !propStatus.canUpdate) {
+    if (!propStatus.canUpdate) {
         if (propStatus.reason === 'computed') {
             return jsx_runtime_1.jsx("span", { style: unsupportedLabel, children: "computed" });
         }
         throw new Error(`Unsupported prop status: ${propStatus.reason}`);
     }
-    if (propStatus === null) {
-        return (jsx_runtime_1.jsx("span", { style: notEditableBackground, children: jsx_runtime_1.jsx("span", { style: unsupportedLabel, children: "error" }) }));
-    }
     if (field.typeName === 'number') {
-        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineNumberField_1.TimelineNumberField, { field: field, effectiveValue: effectiveValue, canUpdate: canUpdate, onSave: onSave, codeValue: codeValue, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd }) }));
+        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineNumberField_1.TimelineNumberField, { field: field, effectiveValue: effectiveValue, onSave: onSave, propStatus: propStatus, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd }) }));
     }
     if (field.typeName === 'rotation') {
-        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineRotationField_1.TimelineRotationField, { field: field, effectiveValue: effectiveValue, codeValue: codeValue, canUpdate: canUpdate, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd }) }));
+        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineRotationField_1.TimelineRotationField, { field: field, effectiveValue: effectiveValue, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd }) }));
     }
     if (field.typeName === 'translate') {
-        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineTranslateField_1.TimelineTranslateField, { field: field, effectiveValue: effectiveValue, codeValue: codeValue, canUpdate: canUpdate, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd }) }));
+        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineTranslateField_1.TimelineTranslateField, { field: field, effectiveValue: effectiveValue, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd }) }));
     }
     if (field.typeName === 'boolean') {
-        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineBooleanField_1.TimelineBooleanField, { field: field, codeValue: codeValue, canUpdate: canUpdate, onSave: onSave, effectiveValue: effectiveValue }) }));
+        return (jsx_runtime_1.jsx("span", { style: wrapperStyle, children: jsx_runtime_1.jsx(TimelineBooleanField_1.TimelineBooleanField, { field: field, propStatus: propStatus, onSave: onSave, effectiveValue: effectiveValue }) }));
     }
     if (field.typeName === 'enum') {
-        return (jsx_runtime_1.jsx("span", { style: inlineWrapper, children: jsx_runtime_1.jsx(TimelineEnumField_1.TimelineEnumField, { field: field, codeValue: codeValue, canUpdate: canUpdate, onSave: onSave, effectiveValue: effectiveValue, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd }) }));
+        return (jsx_runtime_1.jsx("span", { style: inlineWrapper, children: jsx_runtime_1.jsx(TimelineEnumField_1.TimelineEnumField, { field: field, propStatus: propStatus, onSave: onSave, effectiveValue: effectiveValue, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd }) }));
     }
     return (jsx_runtime_1.jsx("span", { style: { ...unsupportedLabel, fontStyle: 'normal' }, children: String(effectiveValue) }));
 };

package/dist/components/Timeline/TimelineSequence.js

@@ -55,7 +55,7 @@ const TimelineSequenceFn = ({ s }) => {
     if (windowWidth === null) {
         return null;
     }
-    return jsx_runtime_1.jsx(Inner, { windowWidth: windowWidth, s: s });
+    return jsx_runtime_1.jsx(TimelineSequenceInner, { windowWidth: windowWidth, s: s });
 };
 const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premountWidth, postmountWidth, style, children, }) => {
     var _a, _b;
@@ -111,7 +111,7 @@ const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premountWidt
                     alignItems: 'center',
                 }, children: jsx_runtime_1.jsx(TimelineSequenceFrame_1.TimelineSequenceFrame, { premounted: isPremounting, postmounted: isPostmounting ? s.duration - 1 : null, roundedFrame: roundedFrame }) })) : null] }));
 };
-const Inner = ({ s, windowWidth }) => {
+const TimelineSequenceInner = ({ s, windowWidth }) => {
     // If a duration is 1, it is essentially a still and it should have width 0
     // Some compositions may not be longer than their media duration,
     // if that is the case, it needs to be asynchronously determined

package/dist/components/Timeline/TimelineSlider.js

@@ -29,10 +29,10 @@ const TimelineSlider = () => {
     if (videoConfig === null || timelineWidth === null) {
         return null;
     }
-    return jsx_runtime_1.jsx(Inner, {});
+    return jsx_runtime_1.jsx(TimelineSliderInner, {});
 };
 exports.TimelineSlider = TimelineSlider;
-const Inner = () => {
+const TimelineSliderInner = () => {
     var _a;
     const videoConfig = (0, remotion_1.useVideoConfig)();
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();

package/dist/components/Timeline/TimelineStack/get-stack.js

@@ -1,43 +1,29 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getOriginalLocationFromStack = void 0;
-const source_map_1 = require("source-map");
+const trace_mapping_1 = require("@jridgewell/trace-mapping");
 const get_source_map_1 = require("../../../error-overlay/react-overlay/utils/get-source-map");
 const get_location_of_sequence_1 = require("../../../helpers/get-location-of-sequence");
-const waiters = [];
-const sourceMapConsumerCache = {};
-const isCreating = {};
+const traceMapCache = {};
+const traceMapPromises = {};
 const getSourceMapCache = async (fileName) => {
-    if (sourceMapConsumerCache[fileName]) {
-        return sourceMapConsumerCache[fileName];
+    if (traceMapCache[fileName]) {
+        return traceMapCache[fileName];
     }
-    if (isCreating[fileName]) {
-        return new Promise((resolve) => {
-            waiters.push({
-                id: String(Math.random()),
-                forFileName: fileName,
-                resolve,
-            });
-        });
+    if (traceMapPromises[fileName]) {
+        return traceMapPromises[fileName];
     }
-    isCreating[fileName] = true;
-    const res = await fetch(`${fileName}.map`);
-    const json = await res.json();
-    const map = await new Promise((resolve) => {
-        source_map_1.SourceMapConsumer.with(json, null, (consumer) => {
-            resolve(consumer);
-        });
+    traceMapPromises[fileName] = fetch(`${fileName}.map`)
+        .then((res) => res.json())
+        .then((json) => {
+        const map = new trace_mapping_1.TraceMap(json);
+        traceMapCache[fileName] = map;
+        return map;
+    })
+        .finally(() => {
+        delete traceMapPromises[fileName];
     });
-    waiters.filter((w) => {
-        if (w.forFileName === fileName) {
-            w.resolve(map);
-            return false;
-        }
-        return true;
-    });
-    sourceMapConsumerCache[fileName] = map;
-    isCreating[fileName] = false;
-    return map;
+    return traceMapPromises[fileName];
 };
 const getOriginalLocationFromStack = async (stack, type) => {
     const location = type === 'sequence'

package/dist/components/Timeline/TimelineStack/index.js

@@ -2,9 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineStack = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
-const source_map_1 = require("source-map");
 const client_id_1 = require("../../../helpers/client-id");
 const colors_1 = require("../../../helpers/colors");
 const get_git_menu_item_1 = require("../../../helpers/get-git-menu-item");
@@ -15,14 +13,6 @@ const layout_1 = require("../../layout");
 const NotificationCenter_1 = require("../../Notifications/NotificationCenter");
 const Spinner_1 = require("../../Spinner");
 const source_attribution_1 = require("./source-attribution");
-const publicPath = window.remotion_publicPath === '/' ? '' : window.remotion_publicPath;
-const withoutSlashInTheEnd = publicPath.endsWith('/')
-    ? publicPath.slice(0, -1)
-    : publicPath;
-// @ts-expect-error
-source_map_1.SourceMapConsumer.initialize({
-    'lib/mappings.wasm': withoutSlashInTheEnd + studio_shared_1.SOURCE_MAP_ENDPOINT,
-});
 const TimelineStack = ({ isCompact, sequence, originalLocation }) => {
     const [stackHovered, setStackHovered] = (0, react_1.useState)(false);
     const [titleHovered, setTitleHovered] = (0, react_1.useState)(false);

package/dist/components/Timeline/TimelineTimeIndicators.js

@@ -69,10 +69,10 @@ const TimelineTimeIndicators = () => {
     if (video === null) {
         return null;
     }
-    return (jsx_runtime_1.jsx(Inner, { durationInFrames: video.durationInFrames, fps: video.fps, windowWidth: sliderTrack }));
+    return (jsx_runtime_1.jsx(TimelineTimeIndicatorsInner, { durationInFrames: video.durationInFrames, fps: video.fps, windowWidth: sliderTrack }));
 };
 exports.TimelineTimeIndicators = TimelineTimeIndicators;
-const Inner = ({ windowWidth, durationInFrames, fps }) => {
+const TimelineTimeIndicatorsInner = ({ windowWidth, durationInFrames, fps }) => {
     const ref = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         const currentRef = ref.current;

package/dist/components/Timeline/TimelineTracks.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
-export declare const TimelineTracks: React.FC<{
+export declare const TimelineTracks: React.NamedExoticComponent<{
     readonly timeline: TrackWithHash[];
     readonly hasBeenCut: boolean;
 }>;

package/dist/components/Timeline/TimelineTracks.js

@@ -1,8 +1,41 @@
 "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.TimelineTracks = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
@@ -19,21 +52,19 @@ const content = {
 const timelineContent = {
     minHeight: '100%',
 };
-const getExpandedPlaceholderStyle = ({ sequence, nodePathInfo, getIsExpanded, getDragOverrides, getCodeValues, }) => ({
+const getExpandedPlaceholderStyle = ({ sequence, nodePathInfo, getIsExpanded, getCodeValues, }) => ({
     height: (0, timeline_layout_1.getExpandedTrackHeight)({
         sequence,
         nodePathInfo,
         getIsExpanded,
-        getDragOverrides,
         getCodeValues,
     }) + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
 });
-const TimelineTracks = ({ timeline, hasBeenCut }) => {
+const TimelineTracksInner = ({ timeline, hasBeenCut }) => {
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const { getDragOverrides, getCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeGettersContext);
-    const visualModeEnabled = Boolean(process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED) &&
-        previewServerState.type === 'connected';
+    const { getCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const previewServerConnected = previewServerState.type === 'connected';
     const timelineStyle = (0, react_1.useMemo)(() => {
         return {
             ...timelineContent,
@@ -51,13 +82,12 @@ const TimelineTracks = ({ timeline, hasBeenCut }) => {
                                 jsx_runtime_1.jsx("div", { style: {
                                         height: (0, timeline_layout_1.getTimelineLayerHeight)(track.sequence.type),
                                         marginBottom: timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
-                                    }, children: jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence }) }), visualModeEnabled && isExpanded && track.nodePathInfo ? (jsx_runtime_1.jsx("div", { style: getExpandedPlaceholderStyle({
+                                    }, children: jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence }) }), isExpanded && track.nodePathInfo && previewServerConnected ? (jsx_runtime_1.jsx("div", { style: getExpandedPlaceholderStyle({
                                         sequence: track.sequence,
                                         nodePathInfo: track.nodePathInfo,
                                         getIsExpanded,
-                                        getDragOverrides,
                                         getCodeValues,
                                     }) })) : null] }, track.sequence.id));
                     })] }), hasBeenCut ? jsx_runtime_1.jsx(MaxTimelineTracks_1.MaxTimelineTracksReached, {}) : null] }));
 };
-exports.TimelineTracks = TimelineTracks;
+exports.TimelineTracks = react_1.default.memo(TimelineTracksInner);

package/dist/components/Timeline/TimelineTranslateField.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
-import type { SchemaFieldInfo } from '../../helpers/timeline-layout';
+import type { CanUpdateSequencePropStatus } from 'remotion';
+import type { SchemaFieldInfo, TimelineFieldOnDragValueChange, TimelineFieldOnSave } from '../../helpers/timeline-layout';
 export declare const TimelineTranslateField: React.FC<{
     readonly field: SchemaFieldInfo;
-    readonly codeValue: unknown;
+    readonly propStatus: CanUpdateSequencePropStatus;
     readonly effectiveValue: unknown;
-    readonly canUpdate: boolean;
-    readonly onSave: (key: string, value: unknown) => Promise<void>;
-    readonly onDragValueChange: (key: string, value: unknown) => void;
+    readonly onSave: TimelineFieldOnSave;
+    readonly onDragValueChange: TimelineFieldOnDragValueChange;
     readonly onDragEnd: () => void;
 }>;

package/dist/components/Timeline/TimelineTranslateField.js

@@ -23,7 +23,7 @@ const containerStyle = {
     display: 'flex',
     gap: 4,
 };
-const TimelineTranslateField = ({ field, codeValue, effectiveValue, canUpdate, onSave, onDragValueChange, onDragEnd, }) => {
+const TimelineTranslateField = ({ field, propStatus, effectiveValue, onSave, onDragValueChange, onDragEnd, }) => {
     var _a;
     const [dragX, setDragX] = (0, react_1.useState)(null);
     const [dragY, setDragY] = (0, react_1.useState)(null);
@@ -41,13 +41,13 @@ const TimelineTranslateField = ({ field, codeValue, effectiveValue, canUpdate, o
     const onXChange = (0, react_1.useCallback)((newVal) => {
         setDragX(newVal);
         const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
-        onDragValueChange(field.key, makeString(newVal, currentY));
-    }, [onDragValueChange, field.key, dragY, codeY, makeString]);
+        onDragValueChange(makeString(newVal, currentY));
+    }, [onDragValueChange, dragY, codeY, makeString]);
     const onXChangeEnd = (0, react_1.useCallback)((newVal) => {
         const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
         const newStr = makeString(newVal, currentY);
-        if (canUpdate && newStr !== codeValue) {
-            onSave(field.key, newStr).finally(() => {
+        if (propStatus.canUpdate && newStr !== propStatus.codeValue) {
+            onSave(newStr).finally(() => {
                 setDragX(null);
                 onDragEnd();
             });
@@ -56,40 +56,31 @@ const TimelineTranslateField = ({ field, codeValue, effectiveValue, canUpdate, o
             setDragX(null);
             onDragEnd();
         }
-    }, [
-        dragY,
-        codeY,
-        makeString,
-        canUpdate,
-        codeValue,
-        onSave,
-        field.key,
-        onDragEnd,
-    ]);
+    }, [dragY, codeY, makeString, propStatus, onSave, onDragEnd]);
     const onXTextChange = (0, react_1.useCallback)((newVal) => {
-        if (canUpdate) {
+        if (propStatus.canUpdate) {
             const parsed = Number(newVal);
             if (!Number.isNaN(parsed)) {
                 const currentY = dragY !== null && dragY !== void 0 ? dragY : codeY;
                 const newStr = makeString(parsed, currentY);
-                if (newStr !== codeValue) {
+                if (newStr !== propStatus.codeValue) {
                     setDragX(parsed);
-                    onSave(field.key, newStr);
+                    onSave(newStr);
                 }
             }
         }
-    }, [canUpdate, dragY, codeY, makeString, codeValue, onSave, field.key]);
+    }, [propStatus, dragY, codeY, makeString, onSave]);
     // --- Y callbacks ---
     const onYChange = (0, react_1.useCallback)((newVal) => {
         setDragY(newVal);
         const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
-        onDragValueChange(field.key, makeString(currentX, newVal));
-    }, [onDragValueChange, field.key, dragX, codeX, makeString]);
+        onDragValueChange(makeString(currentX, newVal));
+    }, [onDragValueChange, dragX, codeX, makeString]);
     const onYChangeEnd = (0, react_1.useCallback)((newVal) => {
         const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
         const newStr = makeString(currentX, newVal);
-        if (canUpdate && newStr !== codeValue) {
-            onSave(field.key, newStr).finally(() => {
+        if (propStatus.canUpdate && newStr !== propStatus.codeValue) {
+            onSave(newStr).finally(() => {
                 setDragY(null);
                 onDragEnd();
             });
@@ -98,31 +89,22 @@ const TimelineTranslateField = ({ field, codeValue, effectiveValue, canUpdate, o
             setDragY(null);
             onDragEnd();
         }
-    }, [
-        dragX,
-        codeX,
-        makeString,
-        canUpdate,
-        codeValue,
-        onSave,
-        field.key,
-        onDragEnd,
-    ]);
+    }, [dragX, codeX, makeString, propStatus, onSave, onDragEnd]);
     const onYTextChange = (0, react_1.useCallback)((newVal) => {
-        if (canUpdate) {
+        if (propStatus.canUpdate) {
             const parsed = Number(newVal);
             if (!Number.isNaN(parsed)) {
                 const currentX = dragX !== null && dragX !== void 0 ? dragX : codeX;
                 const newStr = makeString(currentX, parsed);
-                if (newStr !== codeValue) {
+                if (newStr !== propStatus.codeValue) {
                     setDragY(parsed);
-                    onSave(field.key, newStr).catch(() => {
+                    onSave(newStr).catch(() => {
                         setDragY(null);
                     });
                 }
             }
         }
-    }, [canUpdate, onSave, field.key, codeValue, dragX, codeX, makeString]);
+    }, [propStatus, onSave, dragX, codeX, makeString]);
     return (jsx_runtime_1.jsxs("span", { style: containerStyle, children: [
             jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragX !== null && dragX !== void 0 ? dragX : codeX, style: leftDraggerStyle, status: "ok", small: true, onValueChange: onXChange, onValueChangeEnd: onXChangeEnd, onTextChange: onXTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false }), jsx_runtime_1.jsx("div", { style: { marginLeft: -6, marginRight: -6 } }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragY !== null && dragY !== void 0 ? dragY : codeY, style: rightDraggerStyle, status: "ok", small: true, onValueChange: onYChange, onValueChangeEnd: onYChangeEnd, onTextChange: onYTextChange, min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false })
         ] }));

package/dist/components/Timeline/sequence-props-subscription-store.js

@@ -65,7 +65,7 @@ const acquireSequencePropsSubscription = ({ fileName, line, column, schema, clie
             }
             acquired.promise
                 .then((result) => {
-                if (!result.canUpdate) {
+                if (!result.success) {
                     return;
                 }
                 return (0, call_api_1.callApi)('/api/unsubscribe-from-sequence-props', {

package/dist/components/Timeline/use-sequence-props-subscription.js

@@ -42,13 +42,13 @@ const useSequencePropsSubscription = ({ originalLocation, overrideId, schema, })
             schema,
             clientId,
             applyOnce: (result) => {
-                if (!result.canUpdate) {
+                if (!result.success) {
                     return;
                 }
-                setCodeValues(result.nodePath, result);
+                setCodeValues(result.nodePath, () => result.status);
             },
             applyEach: (result) => {
-                if (!result.canUpdate) {
+                if (!result.success) {
                     return;
                 }
                 setOverrideIdToNodePath(overrideId, result.nodePath);

package/dist/components/Timeline/use-timeline-height.js

@@ -11,12 +11,11 @@ const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
 const useTimelineHeight = ({ shown, hasBeenCut, }) => {
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const { getDragOverrides, getCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeGettersContext);
-    const visualModeEnabled = Boolean(process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED) &&
-        previewServerState.type === 'connected';
+    const { getCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
+    const previewServerConnected = previewServerState.type === 'connected';
     return (0, react_1.useMemo)(() => {
         const tracksHeight = shown.reduce((acc, track) => {
-            const isExpanded = visualModeEnabled &&
+            const isExpanded = previewServerConnected &&
                 track.nodePathInfo !== null &&
                 getIsExpanded(track.nodePathInfo);
             const layerHeight = (0, timeline_layout_1.getTimelineLayerHeight)(track.sequence.type) +
@@ -26,7 +25,6 @@ const useTimelineHeight = ({ shown, hasBeenCut, }) => {
                     sequence: track.sequence,
                     nodePathInfo: track.nodePathInfo,
                     getIsExpanded,
-                    getDragOverrides,
                     getCodeValues,
                 }) + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM
                 : 0;
@@ -36,13 +34,6 @@ const useTimelineHeight = ({ shown, hasBeenCut, }) => {
             timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM +
             (hasBeenCut ? MaxTimelineTracks_1.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT : 0) +
             TimelineTimeIndicators_1.TIMELINE_TIME_INDICATOR_HEIGHT);
-    }, [
-        shown,
-        hasBeenCut,
-        visualModeEnabled,
-        getIsExpanded,
-        getDragOverrides,
-        getCodeValues,
-    ]);
+    }, [shown, hasBeenCut, previewServerConnected, getIsExpanded, getCodeValues]);
 };
 exports.useTimelineHeight = useTimelineHeight;